홈페이지 디자인을 받아서 HTML 작업을 시작할 때,
inline, block 성질을 생각하면서 HTML 태그를 선택해야할까요?
물론 대부분 inline, block 성질에 의해 태그가 결정되지만,
아무 태그나 사용해도 결국은 CSS를 통해 얼마든지 성질을 바꿀 수 있습니다.
아무리 block 요소의 성질을 가진
태그도 css을 사용하여 inline 스타일로 바꾸면 과 똑같은 디자인이 됩니다. inline 성질을 갖도록 하는 CSS property는 display와 float이 있습니다.
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}해당 property에 위와 같은 값을 부여하면,
요소 옆에 요소가 위치하는 inline 성질로 변하게 됩니다.
반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있습니다.
.block-span {
display: block;
}위의 CSS로 은
태그와 똑같은 성질을 갖게 되었습니다.
none
.hide {
display: none;
}display에 none 이라는 값을 주면, 해당 요소는 화면에서 보이지 않습니다.
어차피 안 보일 요소는 왜 작성하는 것일까요?
여러 이유중 하나는 interactive한 웹을 구현할 수 있기 때문입니다.
홀수/짝수
해당 태그의 첫 번째 순서인지,
마지막 순서인인지,
홀수/짝수 인지 알 수 있는 selector 표기법이 있습니다.
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>3. Data Structures & Algorithms</h1>
<p>
개발에서 가장 중요한 요소중 하나인 자료구조와 알고리즘을 학습하는 과정입니다.<br/> 먼저 자료구조와 알고리즘의 핵심 개념 을 이해하고, 가장 자주 사용되는 자료구조와 알고리즘들을 배우고 직접 응용해보도록 하여 더욱 상급 개발자로서의 역량을 갖출수 있도록 하는 과정입니다.
</p>
<ul>
<li>List</li>
<li>Set</li>
<li>HashMap (Dictionary)</li>
<li>Queue</li>
<li>Stack</li>
<li>Tree</li>
<li>Sorting</li>
<li>Search</li>
</ul>
<p>실습 Project: 각 자료구조와 알고리즘을 직접 구현하고 응용하여 개발</p>
</body>
</html>selector: first-child {}
selector: last-child {}
selector: nth=child(odd) {}
selector: nth=child(even) {}
selector는 tag, .class, #id 모두 가능합니다.
index.css 맨 마지막에 추가해보도록 합시다.
//css
li:last-child {
padding-bottom: 0;
}
li:nth-child(odd) {
background: red;
}
li:nth-child(even) {
background: blue;
}