안녕하세요
5월18일 3일차 - navigation bar (box 강의 semantic tag 기억하기) 본문
독학으로 공부하면 semantic tag가 이상하게 사용되기 쉽습니다.
왜 이렇게 쓰이는 건지 다른 사람이 만든 코드를 세세하게 분석하지 않으면 의미를 알기 어렵기 때문이라 생각합니다.
교육의 장점은 이런 부분에서 질문을 할 수 있다는 점 같습니다.
왜 이런 semantic tag 가 이용되었는지~ margin은 왜 이렇게 적용하는지~ 등등
쌤이 가르쳐 주는 대로 반복 숙달 하여 이상한 습관이 생기지 않으려 노력해야겠습니다.
자료형
{} 대괄호는 배열
[] 중괄호는 객체
선택자
- 같은 기능을 하는 경우 (ex) container) 동일한 이름을 부여합니다.
후손선택자 << 가장 중요
.section01 .container : section01 안의 container 만을 선택
.section02. container : section02 안의 container 만을 선택
자식선택자 << 차순위
속성선택자
(거의 안쓰는 것들)
인전형제선택자 인접한 형제 선택
형제선택자 자신(첫번째) 빼고 두, 세번째 <li> <li> <li>
자바스크립트는 부모선택자가 존재합니다.
css는 부모선택자가 존재하지 않습니다.
- html 제작 표준
<body>
<header>
<!--로고-->
</header>
<main>
<!--내용물-->
</main>
<footer>
<!--풋터-->
</footer>
</body>
- github.io
github.io(깃허브 호스팅)를 통해서 개발한 프로젝트를 업로드를 합니다.
github에서 제공하는 서버가 유지되어 포트폴리오로 이용 가능합니다.
트래픽이 많아도 이용가능합니다.
DB는 없기 때문에 서버와 관련하여 등록을 할 수는 없습니다.
파일크기가 20mb 넘으면 업로드 할 수 없습니다.
- github.io 만드는 방법
repository 이름을 설정합니다. youngentry.github.io
add a README file 체크합니다.
settings > Pages > 주소로 접속가능합니다.
- gitbub.io/document 작성법 ( /index.html 은 생략되어 자동으로 인식이 됩니다. )
<body>
<ol>
<li>
<!--
2022.05.17 young
경로
./ 나의 형제 레벨
../ 나의 부모 레벨
-->
<a href="./doc/box01.html" target="_blank">box 01</a>
<p>태그의 일반적인 성질에 대해서 배웁니다.</p>
<strong>강조합니다.</strong> <!-- head안에서 style을 통해 빨간색으로 강조하였습니다. -->
<em>2022.05.17</em>
</li>
<style>
ol li {
margin: 0 0 30px 0;
border-bottom: 1px solid #ddd;
padding: 0 0 30px 0
}
strong {
display: block;
color: #f00;
}
a {
font-size: 19px;
font-weight: 700;
}
</style>
</head>
- 레이아웃 기초 박스 배치 (header)
display: flex; 우선 LOGO와 MENU를 가로로 배열합니다.
.header01 {
display: flex;
}
<header class="header01">
<h1>LOGO</h1>
<nav>MENU</nav>
</header>
- line-height 글자간의 간격입니다.
h1 {
line-height: 100px;
background: red;
}
- justify-content: center 객체를 가운데 정렬합니다.
.header02 {
display: flex;
justify-content: center;
}
- justify-content: space-between; 객체가 두 개일 때, 양 끝으로 정렬합니다.
.header03 {
display: flex;
justify-content: space-between;
}
- justify-content: space-between; 객체가 세 개일 때, 양끝, 중앙에 정렬합니다.
.header04 {
display: flex;
justify-content: space-between;
}
- nav의 왼쪽에 있는 객체와 거리를 띄워 양 끝으로 배치합니다. 중요합니다.
.header05 nav {
margin: 0 0 0 auto;
}
- 중요한 속성입니다. contrainer의 표준 형태를 외웁니다.
.basic .container {
display: flex;
width: 1200px; /*표준 사이즈*/
margin: 0 auto; /*자동으로 늘리기*/
}
- margin: auto; mass 당 거리를 조절하는 방법입니다.
.basic nav {
margin: 0 0 0 auto; /*중요합니다. nav를 기준 왼쪽에 있는 객체와 거리를 두어 양 끝으로 배치합니다. */
}
- gap : 박스간 거리를 조절하는 방법입니다.
.basic nav ul {
display: flex;
gap: 30px; /*gap으로 객체간 거리를 동일하게 조절합니다.*/
}
이미지 다운로드 하는 방법 : f12 > sources > img > 파일찾기
- 자주 이용하는 sementic tag는 의미를 기억하여 잘 활용합니다.
<body>
<header class="basic"> <!-- 상단 바는 header .basic 입니다. -->
<div class="container"> <!-- 안의 내용을 담을 div는 .container 입니다. -->
<h1> <!-- h1은 로고입니다. -->
<a href="/">
LOGO
</a>
</h1>
<nav> <!-- 상단 내비게이션 바는의 태그는 nav 입니다. -->
<ul> <!-- 동일한 성격의 내용을 담기 위해서는 ul 안에 li 배치합니다. -->
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
<div class="icon">+</div> <!-- icon 은 div 안에 담습니다. -->
</div>
</header>
width: 100%는 부모에서 받아오는 너비만큼 가득 채웁니다.
flex: 1; 빈 공간을 채웁니다.
.basic nav {
display: flex;
flex: 1;
background: yellow;
}
display: flex;
}
display: flex;
justify-content: center;
}
display: flex;
justify-content: space-between;
}
display: flex;
justify-content: space-between;
}
display: flex;
}
.header05 nav {
margin: 0 0 0 auto;
}
'프론트엔드 국비교육' 카테고리의 다른 글
| 1주차 정리 (05/16 ~ 05/20) (0) | 2022.05.22 |
|---|---|
| 5월20일 5일차 - 마우스이벤트 hover, font, icon (0) | 2022.05.20 |
| 5월19일 4일차 - popup창 구현 (jquery) (0) | 2022.05.19 |
| 5월17일 2일차 - block, inline 속성 (0) | 2022.05.17 |
| 5월16일 1일차 - sementic tag, reset css (0) | 2022.05.16 |
