TIL 1일차
오늘 처음 멋사의 수업을 들어보았다.
블록체인 스쿨이라 처음부터 블록체인 이론과 실습으로 들어가는 줄 알았으나,
HTML/CSS, JS 기초부터 손에 익히고 들어간다.
HTML/CSS 기초
HTML 과 CSS 는 내 생각과 의도를 아주 간단한 문법으로 표현할 수 있다.
누구나 접속할 수 있는 웹 페이지에서 HTML/CSS 접근이 가능하기에
접근성이 아주 용이하다.
HTML 은 HEADER 와 BODY 로 나뉘게 되는데,
HEADER 부분은 캐리어의 수화물 딱지에 비유할 수 있다. 한마디로 이 파일의 정보에 대해 입력하는 것이다.
BODY 부분은 캐리어 속의 내용물이다. 내가 채우고 싶은 내용물을 넣으면 된다.
CSS 는 이러한 HTML 의 내용물을 꾸며준다.
글꼴이나 폰트 사이즈, 스타일, 색, 줄 간격, 이미지, 링크 등..
HTML
HTML 은 보통 크롬이나 인터넷 브라우저등으로 열 수 있지만, 가끔 생기는 오류가 있을 수도 있기에 HEADER 시작 전,
!DOCTYPE html
html
라는 문장을 써 주는것이 좋다.
이 파일이 HTML 타입이라는 것을 알려주는 것이다.
HEADER 는 파일의 정보에 대해 입력한다고 했다.
이 파일이 한글로 지원될 수 있도록 UTF-8 적용, 제목,
HTML 을 꾸밀 수 있는 CSS 파일과 링크 등..
BODY 는 내가 보여주고 싶은 내용물을 입력한다.
태그라고 해서 h1, p 정도로 나눌 수 있는데,
h1 은 head 1. 소제목 정도로 보면 된다.
p 는 paragraph. 하나의 문단으로 보면 되겠다.
이 BODY 부분을 CSS 로 꾸미기 위해 나눠주는데,
div, section. 이 두개의 단어로 처리하고, class 를 지정해
CSS 에서 쉽게 꾸밀 수 있도록 정리해준다.
여기에 추가로 FOOTER 부분도 있다.
번역하면 바닥부분, 꼬리말 정도로 볼 수 있다.
인터넷을 돌아다니다 보면 상표나 연락처, 사업자 등록번호 같이 웹 페이지의 바닥부분에서 많이 볼 수 있다.
CSS
CSS 는 HTML 의 내용물을 꾸며준다고 생각하면 되겠다.
Import 로 url 을 긁어와서 폰트 설정을 해주는것,
HTML 에서 선언한 class 를 이용해서 폰트, 색, 마진등을 설정하는것,
배경색, 그림자를 넣어주는것 등등...
가로, 세로나 폰트 설정은 어렵지 않았다.
그런데, 박스의 좌우 정렬, float 설정이 좀 까다로웠다.
margin-right: auto;
overflow: hidden;
주로 CSS 를 배우기 어려운 이유라고 하는데, 예전 여러 브라우저들이 서로 표준을 주장했기에 이렇게 만들어졌다고 한다.. 그냥 외우라고 하신다.
원하는 방식대로 h1, p와 같은 태그 그리고 class 를 꾸며주면 된다.
