안녕하세요
5월16일 1일차 - sementic tag, reset css 본문
국비지원교육 프론트엔드 과정을 시작합니다.
특별한 일이 없다면 학원에 출석하고 배운 내용을 기록하여 복습할 수 있도록 합니다.
이후 누군가 국비지원 교육을 하게 될 사람에게 참고될 수 있다 생각하여 말머리에 짧게 생각을 정리하겠습니다.
1일차 1교시 2교시에는 국비지원교육을 어떻게 진행할 것인지, 강사님 소개, 앞으로 취업 지원은 어떻게 진행되는지에 대해 설명이 있었습니다.
3교시부터는 html, css와 JavaScript에 대해서,
그리고 tag와 style을 다루는 방법에 대한 시범을 보여주셨습니다.
html css에 대해서 아무런 경험이 없는 사람은 알아듣기 힘들 것이고 코드를 따라 치는 것 조차도 어려울 것입니다.
교육 시작 전에는 html css에 대해서 이것들이 무엇인가, 어떤 것들이 있는가에 대해서 공부할 것을 권장합니다.
-단축키, 옵션-
폴더에서 파일을 만들었는데 파일 확장자가 나타나지 않을 경우 : 폴더옵션 > 파일확장명 체크
ctrl + U : 브라우저 소스보기
F12 : 브라우저 검사
-extentions-
Auto Rename Tag (열림 태그와 닫힘 태그를 동시에 변경)
아래는 개인적으로 필수라고 생각하는 extentions 입니다.
prettier (코드 줄 정리)
ESLint (맞춤법을 검사하여 오류를 찾아줌)
Material Theme (코드에 시각적 효과 추가)
Material Icon Theme (확장자 icon 으로 시각적 효과 추가)
+
code runner : js 코드 실행결과 출력 (node.js 설치 요구)
html tag : tag는 형식이 정해져 있으며 실제로 자주 사용되는 tag들은 20가지 정도입니다.
<div stlye="color:red">Me</div>
<script>
document.querySelector('div').style.display = 'none';
</script>
JavaScript style : 자바스크립트가 우선순위로 적용됩니다.
<script>
document.querySelector('div').style.display = 'none';
</script>
css style
<style>
div {color:red;display:block;}
</style>
웹표준코딩 : sementic tag를 이용하여 html 코드를 작성하는 것 입니다.
html shortcut : ! 입력하고 엔터키를 눌러 생성합니다.
태그 수준 : parent와 children으로 구분됩니다.
같은 수준 안에서 : next / 첫 번째 children, 두 번째 children, ..., 마지막 children으로 구분됩니다.
<head> // 하위 태그인 <meta>와 <title>에 대하여 parent 입니다.
<meta charset="UTF-8"> // 첫 번째 children 입니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // 첫 번째 children의 next 입니다.
<meta charset="UTF-8"> // 유니코드 입니다. (유니코드는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다.)
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // 브라우저 방식입니다.
<title>Document</title> // 브라우저 상단에 표시되는 title 입니다.
<body>
// 이 곳에서 화면 구성을 하게 됩니다.
</body>
중요 <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 웹, 앱 기반 설정을 합니다.
Alt + L + O : 현재 탭을 브라우저로 열기
<div></div> // width : auto, height : auto 자동으로 공간을 채웁니다.
div는 옆으로 다른 태그가 오는 것을 허용하지 않습니다.
selector(선택자) : head 안의 style 태그에서 div 선택자로 모든 div의 color : red 로 설정할 수 있습니다.
<style>
div {
color : red
}
</style>
</head>
<body>
<div>01</div>
<div>02</div>
</body>
.class 로 이름을 붙여 div를 선택할 수 있습니다.
<style>
.상우 {
color: red;
}
</style>
<div class="상우">01</div>
두 가지 이상의 경우에도 적용이 됩니다.
<style>
.박.상우 {
color: red;
}
</style>
<body>
<div class="최 상우">01</div> // .class는 띄어쓰기로 구분하여 두 상우 모두에게 적용이 되었습니다.
<div class="박 상우">02</div>
</body>
.class 는 두 개 이상의 이름 모두에 적용이 되지만
#id 의 경우에는 반드시 하나의 이름만 존재합니다.
.상우 {
color: red;
}
#상우{
color: blueviolet;
}
<div class="최 상우">01</div> // class호출 .class
<div id="상우">02</div> // id호출 #id
태그 안에서 적용되는 style 은 JS계급입니다. JS가 css 스타일보다 우선하여 적용됩니다.
<div id="상우" class="최 상우" style="color: #ff0">01</div>
semantic tag : 의미가 있는 tag를 일컫습니다.
이하의 lorem5, lorem 등은 더미 텍스트입니다.
자주 쓰는 tag 목록
<body>
<div>Lorem ipsum dolor sit amet.</div>
<h1>Lorem ipsum dolor sit amet.</h1> <!--대제목-->
<h2>Lorem ipsum dolor sit amet.</h2> <!--소제목-->
<h6>Lorem ipsum dolor sit amet.</h6>
<ul> <!--순서가 없는 리스트-->
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ol> <!--순서가 있는 리스트-->
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<figure>Lorem ipsum dolor sit amet.</figure> <!--사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때-->
<a href="">Lorem ipsum dolor sit amet.</a> <!--링크-->
<strong>Lorem ipsum dolor sit amet.</strong> <!--강조-->
<em>Lorem ipsum dolor sit amet.</em> <!--폰트 기울이기-->
<hr /> <!--가로 경계선-->
<p>Lorem ipsum dolor sit amet.</p>
<nav>Lorem ipsum dolor sit amet.</nav>
<header>Lorem ipsum dolor sit amet.</header>
<footer>Lorem ipsum dolor sit amet.</footer>
<main>Lorem ipsum dolor sit amet.</main>
</body>
글자 태그는 block이 아닌 inline 입니다.
<a href="">Lorem ipsum dolor sit amet.</a><!--링크-->
<strong>Lorem ipsum dolor sit amet.</strong> <!--강조-->
<em>Lorem ipsum dolor sit amet.</em> <!--폰트 기울이기-->
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
reset css 설정 초기화. 중요합니다.
* : all. 모든 것에 적용
inherit : (여기에서는 브라우저가) 본래 가지고 있는 성질을 상속받습니다.
<style>
* {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: inherit;
box-sizing: border-box;
}
ul, ol 앞의 점과 숫자 없애기
}
ul,ol{
list-style: none;
}
a 효과 색상 없애기
a {
text-decoration: none;
color: inherit;
}
strong,em 강조, 기울기 없애기
strong,em {
font-style: normal;
}
줄 간격 줄이기
body {
line-height: 1;
}
</style>
텍스트 가운데 정렬
.box {
background: #ddd;
padding: 100px 0;
text-align: center;
}
.box h2 { <!-- .box 안의 h2가 선택됩니다. -->
font-size: 30px;
font-weight: bold;
margin-bottom: 30px;
}
.box p { <!-- .box 안의 p가 선택됩니다. -->
font-size: 15px;
margin-bottom: 30px;
}
.box .container { <!-- .box 안의 .container가 선택됩니다. -->
display: flex; <!-- 크기에 맞춰 가로로 배열합니다. -->
width: 1200px;
gap: 30px; <!-- (여기서는 flex로 정렬되어 좌우) 간격을 줄일 수 있습니다. -->
margin-top: 0;
margin-bottom: 0;
margin-left: auto; <!-- auto를 설정하면 자동으로 길이를 맞춥니다. -->
margin-right: auto;
background-color: #ff0;
}
.box figure {
background: #f00;
}
</style>
</head>
<body>
<h1>제목</h1>
<section class="box"> <!-- section은 큰 div 역할을 합니다. -->
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="container"> <!-- shortcut 입니다. div.container -->
<figure>Lorem ipsum dolor sit amet, consectetur adipisicing.</figure>
<figure>Lorem ipsum dolor sit amet, consectetur adipisicing.</figure>
<figure>Lorem ipsum dolor sit amet, consectetur adipisicing.</figure>
</div>
</section>
</body>
</html>
1일차는 이상입니다.
마땅히 쉴 공간이 없기 때문에 무척 피곤합니다.
'프론트엔드 국비교육' 카테고리의 다른 글
| 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월18일 3일차 - navigation bar (box 강의 semantic tag 기억하기) (0) | 2022.05.18 |
| 5월17일 2일차 - block, inline 속성 (0) | 2022.05.17 |
