2023.03.13 (VOD 강의)
멋사 블록체인 스쿨 3기 1일차 교육을 수강했다.
오늘은 HTML/CSS에 대한 기초강의를 수강했는데 영상을 보며 하나씩 코드를 짜볼때는 어렵지 않게 코드를 짤 수 있었지만 막상 빈페이지에 처음부터 코드를 짜려니 쉽지 않았다.
강의를 들으며 메모했던 내용들에 대해서 하나씩 확인하면서 다시 코드를 짜보았고, 얼추 비슷하게 코드를 만들 수 있었다.
일단 처음 코드를 짜보며 인지하게 된 부분은 사용되는 단어가 아직 어색하고 잘모르기 때문에 여러 단어들에 대한 뜻과 사용처를 알고 있어야겠다는 생각을 했다.
오늘 HTML과 CSS 기초를 배우면서 알게된 내용에 대해서 정리해놔야겠다.
일단 만드는 HTML / CSS
- html&css는 코딩으로 접근하기 보다는 보고서 또는 문서라고 생각하고 접해야한다.
- html과 css는 무조건 파일을 구분해야한다.
- lorem ipsum(차후 텍스트를 넣기 전에 아무말이나 넣어놓는 문구)
- 구글링을 잘하는게 무엇보다 중요하다.
많이쓰는 태그
html,head,body,title,meta,div,a,script,link,span,p,li,ul,h1,i
배운 코드
<!DOCTYPE html> <html> </html>일반적으로 요즘 사용하지 않지만 오류가 나는경우 사용할 수 있다고 함.
margin-left: auto; margin-right: auto;박스를 가운데로 정렬하는 방법(중앙정렬코드)
<head></head>콘텐츠들을 보조해주는 내용이 들어감
<body></body>콘텐츠가 들어감
<meta charset="UTF-8">한글을 인식할 수 있도록 해주는 태그
<link rel="stylesheet" href="codelion.css">html과 css를 이어주는 코드
<footer>내용</footer>화면 하단에 쓰이는 안내문(홈페이지의 맨하단)
text-align: ;텍스트 위치
background-color: ;배경색
color: ;색상
font-size: px;폰트 크기
line-height: ;줄 높이
<div></div> <section></section> <article></article>영역을 만드는 태그(같은 성질)정리를 위한 목적
<p class="big-font"></p>class를 통해 해당 형식을 구분(big-font는 내가 임의로 만든 문장)
.big-font { }css에서 "big-font"에 대해 디테일하게 변경가능(앞에 .을 꼭 붙야아함)
border: px solid black;위와같이 border옆에 두께,방식,색상 등을 넣어 변경할 수 있음
font-weight: lighter; font-weight: light; font-weight: normal; font-weight: blod;폰트 두께(더얇게,얇게,중간,두껍게)
content border padding margin
content,content 외각박스,border 외각박스,padding 외각박스border-botton padding-botton margin-botton밑줄(밑에면),border와 padding의 간격(글과 밑줄의 간격),전체적인 박스의 밑면간격
top, botton, left, right위,아래,왼쪽,오른쪽
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);만들어진 박스의 그림자
1) 0 → 명암이 얼마나 뻗어나가는지/양수면 오른쪽으로 음수면 왼쪽으로 뻗어나감
2) 1px → y축으로 그림자가 이동하는 범위
3) 20px → 그림자의 흐림정도(블러값)
4) 0 → 그림의 퍼짐정도(스프레드값)
5) rgba → rgb=red,green,blue / a=투명도
[수치값 0(가장어두운값)~255(가장밝은값)]@import url('폰트주소');구글 웹 폰트 가져오기
* { font-family: '폰트사용처'; }(모든글에 이 폰트를 사용하겠다.)이 코드까지 넣어야 완성
font-style: normal; font-style: italic; font-style: oblique; font-style: initial; font-style: inherit;폰트 모양(일반,기울임꼴,기울임꼴,기본값,부모요소의 속성값 상속)
ex) .float-wrap { overflow: hidden; }float-wrap으로 크게 묶고 overflow: hidden;(이 태그로 특정 클래스를 묶으면 다른 클래스랑 겹치지 않음)
.title-text { float: left; }float: left;(해당 text는 왼쪽으로)
.year-text{ float: right; }float: right;(해당 text는 오른쪽으로)
위 두 태그는 같은줄에 다른위치에 함께 두고보고싶을때 씀padding-left: px;padding 왼편으로 일정 픽셀만큼 공간이 생김.
<img src="images/파일명.저장프로그램"> ex) <img src="images/facebook.png">이미지 가져오는 방법
<a href="http://사이트주소">링크거는방법
이외 단어
desc(설명),float(뜨다),style(모양),solid(실선),width(폭),height(높이),weight(두께),margin(요소밖깥),border(테두리),padding(요소안쪽)
1일차 교육을 마치며
이해하는데도 시간이 좀 걸렸고, 구성파악하는데도 시간을 좀 들였지만 결론적으로는
머릿속에 어느정도 들어왔다. 다른분들 연습한걸 보면 이정도는 기초에 기초에 기초정도이지만
일단은 차근차근 해나가는게 중요하다고 생각하니까 조바심내지 않고 차분히 해보도록 해야겠다.
차후 시간이 여력이 된다면 좀 더 공부해보는걸로. 내일은 자바스크립트 공부해야하니까
첫 날부터 정리가 깔끔하네요 역시 ㅋㅋㅋㅋ