반응형
/*선택자(selector)*/
div#header-center
{
margin: 0 auto;
width: 1080px;
}
/*자식태크 불러오기 */
div#header-search> h1 {
width: 280px;
}
div#header-search h2 {
display: none;
}
#header-search fieldset{
width: 520px;
}
/*자손태그 불러오기*/
/*#header-center h1{
}*/
CSS - CASCADING STYLE SHEET
조상태그의 기본CSS가 존재하고 자식 태그에도 자동으로 덮어씌어 진다.
이 기능을 잘 활용해야한다.
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset="utf-8"/>
<meta /> <!--아무것도 담을 내용이 없으면 이렇게 작성가능-->
<!--meta -> 문서에 대한 정보를 나태내는 태그-->
<!--주석처리하는 방법-->
<title>네이버</title>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico?1"/>
<link rel="stylesheet" href="./naver.css"><!--css파일의 정보를 여기서 준다-->
<!--rel-> favicon을 의미 type-> favicon의 정보 href -> favicon의 위치 ./ ->(현재폴더)-->
</head>
<body> <!--중요도에 따라 h태크 옆에 숫자를 붙여 주면 문자열 크기도 달라진다-->
<header><!--div id="Header"--><!--구분하기 위해서 이렇게 이름을 적어 줬는데 이제는 div를 바로 이름으로 바꿀수 있음-->
<div id="header-center"><!--가운대 정렬용 div-->
<!-- css 형태 ->속성명: 값; 속성명2 :속성값2(인라인 스타일)-->
<!--주로 css는 따로 모아서 적어주는게 좋다 ! -->
<div>
네이버를 시작페이지로
</div>
<div id="header-search">
<h1>
<a href ="http://www.naver.com">네이버</a>
</h1>
<!--a(attribute) 태그는 해당 문자열에 링크를 넣어준다 herf는 해당 넘어가는 링크의 주소-->
<h2>검색창</h2>
<fieldset>
<!--fieldset->검색창 껍대기 생성-->
<legend>검색</legend>
<!--legend -> 범례라는 뜻으로 이름 박아주는? 구분시켜주는 -->
<input />
<button>검색</button>
<!--입력할수 있는 박스 진짜 검색 창 -->
</fieldset>
</div>
</div>
</header>
<nav>
<ul> <!--unordered list : 글자 나열 ol(ordered list)은 앞에 숫자가 붙는다-->
<li>메일</li><!--list item-->
<li>카페</li>
<li>블로그</li>
<li>지식인</li>
<li>쇼핑</li>
<li>네이버페이</li>
</ul>
</nav>
<main>
<h2>실시간 검색어</h2>
<h3>연합뉴스</h3>
<ol>
<li>충격) 이준호 지금 너무 피곤해</li>
<li>속보) 이제 그만하고 싶다고...</li>
<li>중대 발표: 인강 개 노잼</li>
</ol>
<h3>언론사 목록</h3>
<ul>
<li><img src="./연합뉴스png.png" alt="연합뉴스png"></li>
<li><img src="./문화일보.png" alt="문화일보"></li>
</ul>
<span>그냥 택스트</span>
<b>택스트 굵게</b>
<h3>로그인</h3>
<h3>뉴스</h3>
<h3>법률</h3>
<h3>쇼핑</h3>
</main>
<footer>
<div>공지사항</div>
<div>Creators</div>
<div>회사소개</div>
</footer>
</body>
</html>
반응형
'Web Dev' 카테고리의 다른 글
| Docker Dockerfile 작성법 , docker 명령어 쉽게 접근하기 (0) | 2023.03.21 |
|---|---|
| Javascript 문법 - [ ...변수 ] : 스프레드 연산자(spread)에 대해 설명해줄께 !! (0) | 2023.03.10 |
| JAVA Spring [전자정부프레임워크] 프로젝트 환경 설정 ! (0) | 2023.03.09 |
| Linux Ubuntu 22.04 에 Flutter +Android Studio 설치 및 세팅! (0) | 2023.02.25 |
| Java (Spring) : 빈의 범위 (bean) (2) | 2023.02.24 |
| Node.js - MySQL 연동 /MySQL로 홈페이지 구현 (0) | 2023.02.23 |
