- 프론트엔드?
- 서버와 클라이언트
- 코딩을 시작, emmet
- html 구조
- html 블록, 인라인 개념
- css 구조
- css 문제 해결1
- css 선언방식
- css 선택자
프론트엔드는 뭘 다루는 작업인가?
방금 프론트엔드 단어 뜻을 알게된 당신. 이 아래 캡쳐본 하나로 설명이 된다.
웹사이트의 모양을 ‘실제로’ 바꾸는 엔지니어다. 이렇게 바꾸자고 결정하는 ‘디자이너’와 협업하여 실제로 구현하는 작업이다. 단순히 글자만 바꾸는 것보다 훨씬 기술적으로 복잡한 일을 할 것이다.
서버와 클라이언트
우리 컴퓨터는 만들어질때부터 세상 모든 웹사이트에 대한 정보를 담고있지 않는다. 인터넷 선으로 정보 신호를 받아내 이를 웹 사이트의 형식으로 가공하는 거다. 가공하는 기계가 웹 브라우저고, 가공하는 룰, 기술이 프로그래밍 언어라고 배웠다. (정확히는 시각화 하는 작업을 렌더링이라고 들었다.)
지구, 대한민국 어디선가 정보를 주는 주체도 컴퓨터다. 즉, 웹사이트를 띄우기 위해 보를 주고받는 모든 행위는 개인 컴퓨터와 회사 내부 개별 컴퓨터 사이의 정보 교환, 거래이다. 수백, 수천만번 왔다갔다할 거래이고, 이 기술분야에 대한 내용도 많을 거다.
회사 컴퓨터는 수많은 개인 컴퓨터를 상대하는 가게 주인장 같다(서버). 개인 컴퓨터는 클라이언트가 된다.
코딩을 시작, emmet
vscode를 깔고, 컴퓨터 어딘가에 폴더를 만들고, vscode를 열어서 해당 폴더에서 작업을 시작하자. menu>open folder를 통해서 할 수 있다.
왼쪽 사이드바는 ctrl+b로 여고 닫을 수 있다. 이 사이드바에 더블클릭을 하면 빈 이름의 파일이 생기려고 한다. 이름을 적어주면 생긴다. index.html로 많이들 시작한다.
오른쪽에 메모장, 워드창 같은 빈 공터에 !를 적고 바로 Tab을 눌러주자. 그럼 코드가 크게 생긴다. 자동 생성, emmet 기능이다.(html5)를 쳐도 된다.
html 구조
<input type=”text”>
<태그명 속성=”값”></태그명>
이런 식이고, 속성과 값은 미리 정해진 것들만 통용된다. 구글링에 보면 정해진 표에 있는 것만 따라야 한다.
html 블록, 인라인
html의 여러 태그들엔 블록요소와 인라인 요소가 있다.
블록 : 영역을 차지하는 html 요소. 안에 글자가 들어갈 수도, 눈으로 보기엔 공백이어도 공간을 차지하고 있는거다. default, 기본값은 좌우로 끝까지를 차지한다.
인라인 : 글자나 컨텐츠가 있는 영역만 차지하는 요소.
둘이 있다는 것만 알아도, div(블록)와 span(인라인)의 차이를 알게 되고, 다른 요소들도 두가지 중에 하나로 꼭 들어감을 알게된다.
css 구조
선택자 {
속성 : 값;
}
html과 css를 하다보면 속성이 많다. 많은 만큼 많이 공부하되, 융통성있게 검색으로 해결하라는 얘기도 있다.
css 문제 해결1
가운데로 정렬을 하려니 학원에서 배운 방식 말고 다른 방식이 궁금해졌다.
이런 식으로 정보를 찾고, 내가 아는 것을 늘려간다. 무엇보다 중요한건, 문제해결력을 키운다. 주어진 시간 내에.