semantic
semantic.html
<!DOCTYPE html>
<html lang="ko">
<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>semanticTag</title>
<style>
html, body, div, header, section,
article, nav, h1, h2, h3, h4, h5, h6, a, ul, li, p{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix::after{
content: "";
display: block;
clear:both;
}
.inner{
width: 1200px;
height: 100%;
margin: 0px auto;
background-color: coral;
position: relative;
}
/* header */
header{
width: 100%;
height: 100px;
background-color: pink;
margin-bottom: 20px;
}
h1.logo{
width: 100px;
height: 50px;
background-color: green;
text-align: center;
line-height: 50px;
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
}
nav.gnb{
width: 750px;
height: 50px;
position: absolute;
bottom: 0px;
right: 50px;
background-color: green;
}
nav.gnb ul{
width: 100%;
height: 100%;
}
nav.gnb ul li{
width: 150px;
height: 100%;
margin-right: 50px;
float: left;
background-color: pink;
}
nav.gnb ul li:last-of-type{
margin-right: 0px;
}
/* 띄어쓰기 주의하기. */
nav.gnb ul li a{
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
}
/* main */
main{
width: 100%;
/* 높이 고정값 넣지 말고 자식요소 감싸게 냅두기 */
padding: 25px;
background-color: goldenrod;
height: 100%;
}
div.mainContent{
width: 70%;
margin-right: 5%;
float: left;
background-color: pink;
}
aside{
width: 25%;
height: 1000px;
float: left;
background-color: pink;
}
section.content01{
width: 100%;
padding: 25px 0px;
margin-bottom: 20px;
}
h2.mainTit{
width: 100%;
background-color: green;
height: 50px;
margin-bottom: 10px;
}
article{
width: 100%;
height: 200px;
background-color: lightsalmon;
margin-bottom: 10px;
}
section.content02{
width: 100%;
background-color: greenyellow;
height: 300px;
margin-bottom: 20px;
}
footer{
width: 100%;
height: 100px;
padding: 25px 0px;
background-color: black;
}
p.fLogo{
width: 150px;
height: 50px;
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
background-color: peru;
}
p.copy{
position: absolute;
height: 100px;
right: 50px;
top: 50%;
transform: translateY(-50%);
line-height: 100%;
}
</style>
</head>
<body>
<!--
제목을 표시하는 태그
h1 ~ h6까지 사용하며, 제목의 크기에 따라 숫자의 크기가 달라짐.
숫자가 클수록 큰 제목을 의미함.
폰트사이즈의 크기를 말하는 것이 아닌 주제가 갖고 있는
내용의 크기를 말하는 것.
파일에 따라 제목요소의 크기를 결정지어서는 안됨.
보통 h1을 사이트의 제목(로고)로 사용하며 웹 사이트에서 한번만 사용.
순서대로 h2, h3... 순으로 내려가야 하며 h1 -> h3같이 순서를 건너뛸 수 없음. (구현은 되지만 의미적으로 X)
*하단에 있는 로고의 경우 h요소보다는p태그나 div태그 사용
header = 사이트 내에서 메인메뉴, 로고와 같은 페이지와 관계없이 동일한(구조를 가진 영역)레이아웃을 유지해줌.
footer = 사이트 하단 영역에 들어가는 공통 정보를 넣는 영역.
header와 마찬가지로 동일한 구조를 갖고 있어야 함.
main = 컨텐츠를 담고 있는 가장 큰 상위개념의 태그.
문서 하나에 하나의 main태그만 사용할 수 있음.
section = 어떤 주제에 관련되어 있는 여러개의 요소들을 묶는 태그.
제목요소와 내용이 반드시 있어야함.
article = 독립적으로 구분되거나 재사용에 가능한 영역을 나눌때
블로그 글, 신문칼럼등이 해당됨(명제)
논리적인 구조에 따라 section안에 article이 올수도있음
article안에 section이 있는 경우도 있음.
둘 다 맞는 구조이지만 대체적으로는 section안에 article구조가 더 많은 편
nav = 웹 페이지를 이동할 수 있는 메인메뉴 역할을 하는
gnb의 박스 태그
aside = main content외에 부가적으로 들어간는 영역에 대한 태그.
이외에 의미를 가지고 있지 않거나 단순한 컨텐츠 영역을 설정할 때에는 div를 사용
-->
</body>
<header>
<div class="inner">
<h1 class="logo">
logo
</h1>
<nav class="gnb">
<ul class = clearfix>
<li><a href="#" title="메인메뉴">menu01</a></li>
<li><a href="#" title="메인메뉴">menu02</a></li>
<li><a href="#" title="메인메뉴">menu03</a></li>
<li><a href="#" title="메인메뉴">menu04</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="inner clearfix">
<div class="mainContent">
<!-- 주요 컨텐츠 묶는 태그-->
<section class ="content01">
<h2 class="mainTit">타이틀입니다.</h2>
<article>
<h3>article title</h3>
컨텐츠 내용입니다.
</article>
<article>
<h3>article title</h3>
컨텐츠 내용입니다.
</article>
<article>
<h3>article title</h3>
컨텐츠 내용입니다.
</article>
</section>
<section class="content02">
<h2 class="mainTit">컨텐츠</h2>
</section>
</div>
<!-- mainContent -->
<aside>aside</aside>
</div>
</main>
<footer>
<div class="inner">
<p class="fLogo">
logo
</p>
<p class="copy">
후 . . .
</p>
</div>
</footer>
</html>flex
display
display_me.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>플렉스</title>
<link rel="stylesheet" href="reset.css">
<style>
.container{
display: flex;
/* inline-flex */
}
/* flex만 적용되면 자식요소들은 inline요소처럼 컨텐츠의 크기만큼만
영역을 가질 수 있음
height는 컨테이너의 높이만큼 가져오게 됨.
flexible-layout
기존의 레이아웃을 잡는 용도인 float, inline-block을
대체할 수 있는 css3레이아웃 기법.
table --> float --> flex --> grid
레이아웃 배치를 위해 만들어진 기법이기 때문에
float나 inline-block보다 훨씬 간편하고 강력한 기능을 제공하고 있음
*ie에서 100%호환을 하지 않기 때문에 적절한 대체 css가 필요했으나
고려사항은 이제 아님.
flex는 부모요소와 자식요소에 들어가는 css가 정해져있음.
부모요소는 flex에 영향을 주는 공간
자식요소는 flex의 영향을 받는 공간에서 어떤 형태로 배치될지 정하는 요소
*/
</style>
</head>
<body>
<div class="container">
<div class="item">aaaaaaaaaaaa</div>
<div class="item">bbbbbbbb</div>
<div class="item">cccccccccc</div>
<div class="item">dddd</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea earum mollitia alias fugit consectetur repellat dolores voluptatibus natus, quod dignissimos illum sequi officia eius nemo a, suscipit non. Repellendus, consequuntur.
</body>
</html>decoration
decoration_me.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="reset.css">
<style>
.container{
display: flex;
/* flex-direction: row; */
flex-direction: row-reverse;
/* flex-direction: column; */
}
/*
row : 가로축 방향(기본값) 왼쪽부터 진행
row-reverse : 가로축 반대(오른쪽)부터 진행
column : 세로방향 위에서 아래로 진행
column-reverse : 세로방향 아래에서 위로 진행
*/
</style>
</head>
<body>
<div class="container">
<div class="item">aaaaaaaaaaaa</div>
<div class="item">bbbbbbbb</div>
<div class="item">cccccccccc</div>
<div class="item">dddd</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea earum mollitia alias fugit consectetur repellat dolores voluptatibus natus, quod dignissimos illum sequi officia eius nemo a, suscipit non. Repellendus, consequuntur.
</body>
</html>wrap
wrap_me.html
<!DOCTYPE html>
<html lang="ko">
<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="reset.css">
<style>
.container{
display: flex;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
flex-flow: row wrap;
}
/* flex-wrap : 부모요소가 자식요소들의
컨텐츠를 한 줄에 다 넣을 수 없을 때 줄바꿈 처리
nowrap : 줄바꿈 처리 안함(기본값)
wrap : 줄바꿈처리(float과 inline요소와 같음)
wrap-reverse : 줄 바꿈을 하지만 아래로 떨어지지 않고
반대로 올라감
flex-flow : direction과 wrap을 동시에 사용하는 그룹속성.
순서는 direction, wrap순서대로 값이 들어감.
*/
</style>
</head>
<body>
<div class="container">
<div class="item">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="item">bbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="item">cccccccccc</div>
<div class="item">dddd</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea earum mollitia alias fugit consectetur repellat dolores voluptatibus natus, quod dignissimos illum sequi officia eius nemo a, suscipit non. Repellendus, consequuntur.
</body>
</html>justify-contents
justify-contents_me.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="reset.css">
<style>
/*
방향정렬요소
justify-: 진행방향
align- : 진행방향의 반대 축
direction의 값에 따라 방향이 바뀌기 때문에
지정된 속성은 아님.
flex-start : 기본값(row일때 왼쪽 column 일때 위를 기준으로)
flex-end : 자식요소를 끝쪽으로 이동
(row 일때 오른쪽 column일때 아래쪽)
center : 가운데
space-around : 자식요소들의 "둘레"에 균일한 간격을 배분
space-between : 자식요소들의 "사이"에 균일한 간격을 배분
space-evenly : 자식요소들의 "양쪽"에 균일한 간격을 배분
*/
.container{
display: flex;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
justify-content: space-evenly;
}
</style>
</head>
<body>
<div class="container">
<div class="item">aaaaaaaaaaaaaaaaa</div>
<div class="item">bbbbb</div>
<div class="item">cccccccccc</div>
<div class="item">dddd</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea earum mollitia alias fugit consectetur repellat dolores voluptatibus natus, quod dignissimos illum sequi officia eius nemo a, suscipit non. Repellendus, consequuntur.
</body>
</html>align-items
align-items.html
<!DOCTYPE html>
<html lang="ko">
<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="reset.css">
<style>
/*
align-items : justify-content의 반대쪽 방향 정렬
stretch : 부모요소의 높이값을 받아서 길이가 늘어남(기본값)
flex-start
(direction이 row일때 위 column일때 왼쪽)
flex-end:끝점으로 정렬
(direction row일때 아래 solumn일때 오른쪽)
center : 가운데
baseline : 텍스트의 베이스라인 기준으로 정렬이 됨.
*/
.container{
display: flex;
align-items: baseline;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">AAAAAAAAAAAA</div>
<div class="item">BBB</div>
<div class="item">QQQQQQQQQQ</div>
</div>
</body>
</html>align-content
align-content_me.html
<!DOCTYPE html>
<html lang="ko">
<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="reset.css">
<style>
.container{
display: flex;
flex-wrap: wrap;
height: 500px;
width: 50%;
align-content: space-evenly;
}
/*
align-content : 여러웆ㄹ의 행을 정렬해주는 속성 위속성을 사용하기
위해서는 flex-wrap의 값이 nowrap이면 됨.
stretch : 기본값
flex-start : 시작점 정렬
flex-end : 끝점 정렬
center : 가운데
space-around : 둘레에 여백을 "균등" 하게 분배
space-between : 자식 사이에 여백을 "동일"하게 분배
space-evenly : 균등하게 정렬
*/
</style>
</head>
<body>
<div class="container">
<div class="item">AAAAAAddddddddAAAAAdddddddddddddA</div>
<div class="item">BBB</div>
<div class="item">CCCCCCC</div>
<div class="item">dddddddddddddddddddddddd</div>
</div>
</body>
</html>flex-grow
flex-grow_me.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="reset.css">
<style>
/*
flex-basis : 자식요소들의 기본크기 설정.
width와 같이 영역을 설정하는 값이지만 다른점은 direction의 방향에 따라 영역이 달라지게 됨
direction :row일때 width
direction : column일때 height
px단위나 %로 영역을 설정함.
기본값은 auto
flex-basis의 값이 설정되면 min-width처럼 최소값이
수치로 적용되며 컨텐츠의 내용이 basis의 수치를 넘어가게 되면
유연하게 늘어나게 됨.
반면에 width값으로 고정px을 주게 되면 유연하게 늘어나지 않음.
flex-grow 아이템들의 값이 flex-basis보다 커질때 결정하는 속성
양수값이 들어가며 기본값은 0.
0보다 큰 값이 들어가면 해당 아이템들은 원래의 크기보다
커지며 빈 영역을 채우게 됨.
*/
.container{
display: flex;
/* flex-direction: column; */
}
.item{
flex-basis: 150px;
/* 컨텐츠의 최소값은 150px.
그것보다 컨텐츠가 커지면 유연하게 늘어남.
*/
/* flex-grow: 1; */
}
.item:nth-of-type(1){
flex-grow: 3;
}
.item:nth-of-type(2){
flex-grow: 2;
}
.item:nth-of-type(3){
flex-grow: 1;
}
.item:nth-of-type(4){
flex-grow: 5;
}
/* 숫자가 클수록 여백을 더 많이 가져감 */
</style>
</head>
<body>
<div class="container">
<div class="item">AAAAAAAAAAAA</div>
<div class="item">BBB</div>
<div class="item">CCCCCCC</div>
<div class="item">DDDDDDDDDDDDDD</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, facere.
</body>
</html>flex
flex_me.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="reset.css">
<style>
/*
flex : grow shrink basis를 한번에 관리하는 그룹속성
기본값에 유의하여 사용해야 함.
flex-basis의 기본값은 auto지만
flex에서 값을 생략하면 auto가 아닌 0이 적용됨.
반드시 기본값을 기입할대에는 auto를 넣어줘야함.
*/
.container{
display: flex;
}
/* .item{
/* flex: 1; }*/
.item:nth-of-type(1){
flex: 1;
/* 1 1 0 */
}
.item:nth-of-type(2){
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item">AAA</div>
<div class="item">BBB</div>
<div class="item">CCC</div>
<div class="item">DDD</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, facere.
</body>
</html>align-self
align-self_me.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>플렉스 기본</title>
<link rel="stylesheet" href="reset.css">
<style>
/* align-self
align-items의 자식요소 버전으로 items는 전체 자식요소
정렬요소라면 self는 해당 아이템에 개별적으로 적용하는 요소임.
기본값은 auto align-items의 값을 상속 받음.
self가 items보다 더 우선순위를 가짐.
*/
.container{
display: flex;
height: 500px;
align-items: center;
}
.item:nth-of-type(3){
align-self: flex-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">AAA</div>
<div class="item">BBB</div>
<div class="item">CCC</div>
<div class="item">DDD</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, facere.
</body>
</html>shrink
shrink_me.html
<!DOCTYPE html>
<html lang="ko">
<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="reset.css">
<style>
/* flex-shrink
basis의 값보다 작아질 때 결정하는 속성
숫자값인 정수가 들어가며 0보다 큰 값이 들어가면 적용됨.
기본값은 1.
기본값 1일 때에는 자동으로 영역이 축소됨.
flex-wrap가 wrap일때에는 적용되지 않음.
nowrap일 때에만 적용
*/
.container{
flex-wrap: nowrap;
display: flex;
width: 400px;
padding: 25px;
}
.item{
flex-basis: 150px;
/* flex-shrink: 0; */
}
.item:nth-of-type(1){
flex-shrink: 2;
}
.item:nth-of-type(2){
flex-shrink: 0;
}
.item:nth-of-type(3){
flex-shrink: 4;
}
.item:nth-of-type(4){
flex-shrink: 1;
}
/* 넘치는 영역에 대해 n분의 1로 쪼개어버림. */
</style>
</head>
<body>
<div class="container">
<div class="item">AAA</div>
<div class="item">BBB</div>
<div class="item">QQQ</div>
<div class="item">ddd</div>
</div>
</body>
</html>
그냥 기록용!!!