블럭 요소 : DIV, H1, P
최대한의 너비를 사용한다.
크기를 지정할 수 있다.
width:100% height:0 으로 시작(이 값을 가지는게 아니고 시작하는 값이다. 이렇게 입력해보면 아예 안나올것이다.)
인라인 요소 : SPAN, IMG
필요한 만큼 너비를 사용한다.
크기를 지정할 수 없다.
width:0, height:0 으로 시작.
브라우저상에서 설정되어 있는 것은 width:auto, height:auto로 설정되어 있을텐데
이 auto라는 것이 위 블럭요소와 인라인 요소의 값을 가지고 시작하는 것을 의미한다.
아래와 같이 이렇게 입력하면 위 인라인요소 3개는 붙어서 나오고 밑에 2개는 앞뒤에 띄어쓰기를 포함한채 나온다.
인라인 요소는 padding이나 margin에서 위아래 값을 가질 수 없으나 이상하게도 padding을 쓰면 밑에까지 색상이 내려오는 것을 볼 수 있다.
실질적으로 영역을 차지하지는 않지만 시각적으로만 나온다. 결론적으로 위 아래는 사용할 수 없다.
<span>안녕하세요</span><span>안녕하세요</span><span>안녕하세요</span>
<span>안녕하세요</span>
<span>안녕하세요</span>charset
EUC-KR : 완성형
한글이 깨지는 현상이 발생할 수 있다.
박 태 준
UTF-8 : 조합형
ㅂ ㅏ ㄱ ㅌ ㅐ
http-equiv
<!-- IE를 지원한다면 이 코드가 포함되어야 한다. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">base
기존 경로를 설정한다.
아래 예시에서 css폴더를 베이스로 잡으면 아래 link태그에서 css폴더를 기본으로 잡아온다.
주의점은 단 한번만 사용할 수 있고. 많이 쓰이는 태그는 아니다.
<base href="./css/">
<link rel="stylesheet" href="main.css">body
header, footer
html5로 오면서 시멘틱 태그(의미를 가진 태그)를 쓸 수 있게 되었다.
아무런 의미를 가지지 않는 div를 header로 바꿀 수 있게 되었다.
<div class="header"> 이렇게 안쓰고 <header> 이렇게 사용할 수 있다.ie11이 최신버전이고 ie9이상 지원하는 것이면 사용하는데 문제없을 것이다.
h1~h6
제목 폰트 크기를 줄이기 위해 낮은 단계를 사용하면 안된다!
구조를 나타내기 위해 사용해야지 크기에 맞춰서 사용하면 안된다.(브라우저마다 크기가 다르다.)
CSS에서 h1~h6의 크기를 지정하고 사용해야 한다.
h1다음에 h3을 쓰지말고 h2를 써라. 순차적으로 사용해라.
이런 것들은 절대적인 것은 아니고 추천하는 방식이다.
main
IE지원 불가.
페이지의 핵심적인 컨텐츠가 들어오면 된다.
main태그는 블럭 요소다. 각 태그마다 요소 확인은 아래 링크에서 할 수 있다.
참고 : https://heropy.blog/2019/05/26/html-elements/
article
독립적으로 구분되거나 재사용 가능한 영역 설정.
article 쓰기 애매하다면 section을 쓰거나 더 희석된 div를 쓰면 된다.
article안에 section들어갈 수 있다.
section
문서의 일반적인 영역
section안에 article들어갈 수 있다.
aside
별도 콘텐츠. 광고나 기타링크등의 사이드 바 같은 것.
nav
nav안에서 a태그를 통해서 명시되어있다.
address
연락처 정보 기입.
mailto나 tel을 이용해서 바로 메일앱이 열리게한다던지 핸드폰에서 전화창이 바로 뜨게 해줄 수 있다.
일반적인 형태
section과 article은 바꿀수도 있다.
영역을 설정하는 태그들은 다 block이다.
header
nav
section aside
article aside
footer
예제
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test3.css">
</head>
<body>
<header>
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</nav>
</header>
<!-- main없이 section과 aside를 쓰게 되면 aside가 밑으로 가게 되서 두개를 래핑해주기 위해 main을 쓴다. -->
<!-- cmd + shift + p > wrap을 해서 래핑한다. -->
<main>
<section>
<h1>section</h1>
<article>
<h2>article1</h2>
<p>contents</p>
</article>
<article>
<h2>article1</h2>
<p>contents</p>
</article>
<article>
<h2>article1</h2>
<p>contents</p>
</article>
</section>
<aside>
aside
</aside>
</main>
<footer>
<address>
<a href="mailto:joker77z@naver.com">joker77z@naver.com</a>
<a href="tel:+821071645084">010-7164-5084</a>
</address>
</footer>
</body>
</html>css
header {
background: tomato;
margin: 10px;
padding: 20px;
}
header nav ul {
/* li들이 가로로 배치된다. */
display: flex;
}
header nav ul li {
list-style: none;
margin: 10px;
}
main {
/* aside태그가 오른쪽으로 붙어진다. */
display: flex;
}
section {
width: 70%;
background: tomato;
margin: 10px;
padding: 10px;
/* 패딩이 들어갔을 때 요소가 커지지 않게 */
box-sizing: border-box;
}
article {
background: yellowgreen;
margin-bottom: 10px;
padding:10px ;
}
aside {
width: 30%;
background: tomato;
margin: 10px;
padding:20px;
box-sizing: border-box;
}
footer {
background: tomato;
margin:10px;
padding-inline-end: 10px;
}
/* a 태그를 수직으로 맞추기 위해 block으로 바꾼다. */
footer address a {
display: block;
}'Developer Camp[Fastcampus NKLCB] 2021.07 > 2021.07~ FastCampus 네카라쿠배2기' 카테고리의 다른 글
| 2일차 : FORM, INPUT (0) | 2021.07.13 |
|---|---|
| 2일차 : 테이블 (0) | 2021.07.13 |
| 1일차. HTML, CSS(3) (0) | 2021.07.12 |
| 1일차. HTML, CSS(1) (0) | 2021.07.12 |
| 1일차. HTML, CSS 기본적으로 알고있어야 하는 지식 (0) | 2021.07.12 |
댓글