Today I learned
- html
- css
[html]
-
웹 문서의 틀
-
hyperText markup language
구조를 표현하는 언어
의미를 명시적으로 잘담고 있는지, 코드만 보고 어떤 내용인지 알아볼 수 있어야 한다.
-
html로 충분한 의미를 (semantic) 잘 부여해야 자바스크립트 코드를 보다 더 직관적으로 작성할 수 있다.
-
HTML 기본 태그
-
input form
-
자바스크립트의 개발을 고민해보면서 구조를 짜는 게 좋다.
-
semantic web & tag
모든 걸 다 div 로 처리하는 것이 아니라 section, article, footer, header, main, nav, main 등의 의미를 담는 의미를 담은 태그를 설정, 그러한 웹을 시맨틱 웹이라고 한다.
-
opening tag, closing tag, self-closing tag
-
div, span tag
div 태그는 block 태그
span 태그 inline tag
-
ul, ol, li
목록의 의미를 가지고 있는 곳에는 리스트 태그를 써서 의미를 살려주는 게 좋다.
-
input type
- checkbox
- text
- password
- radio
- input
- submit
- reset
-
id, class
id는 문서에서 하나만 사용할 수 있다. 클래스는 여러개 사용할 수 있다. 공통적으로 css를 잡을 필요가 있을 땐 클래스를 주로 사용한다.
[css]
-
슈도 클래스
특정 셀렉터에 특별한 효과를 부여하기 위해 사용
자바스크립트나 어떠한 다른 스크립트를 사용할 필요가 없다.
- :link
- :visited
- :hover
- :active
- :focus
- :first-child
- :lang
-
position
- sticky
relative처럼 작동하나 스크롤 영역을 벗어나면 fixed 처럼 작동
- sticky
-
box model
-
position
-
flex
[Comment]
@@ 오늘은 오랜만에 html과 css를 학습하는 시간을 가졌다. 일할 때만 쓰다가 다시 보니까 반갑기도 하고, position 에 sticky는 몰랐었는데 새로운 속성도 추가적으로 알게 됐다. 간만에 flex도 다시 써보고, grid는 잘 쓰지 않았었는데 동기분이 공유해주셔서 잠깐 시간 났을 때 게임 형식의 웹에서 연습도 해봤다.
빠르게 레슨을 공부하고, 미리 html 영역 어떤 것들을 배우나 예습도 좀 해보고 실습으로 있었던 프로필 페이지도 마크업으로 간단하게 잡아보고 (정...말 간단하게...) 다음은 validation 연습해보고 싶어서 mark은 형태만 잡아서 validation 함수를 연습해봤다. 네이버 회원가입 창 보면서 맞춰보려고 연습했다. 예전에는 너무 막막했기만 했는데, 코플릿을 풀어서 그런가 슈도코드를 연습해서 그런가.
일단 슈도코드부터 작성해보자. 하고 나눠보니 일단 의도한 대로 돌아가긴 한다. 이게 효율적인 방법인지는 고민해봐야겠지만 일단 검색하고 코드를 작성하고 콘솔창 찍어보며 의도한대로 돌아가보니 새삼 너무 신기했다.
아직 마무리를 못해서 깃허브엔 올리지 못했는데, 곧 마무리 지어서 올려야겠다.
To do List 에 앞으로 해야할 것 누적된 것을 정리하는데 하나 둘 씩 늘어나더니 너무 많이 늘었다. 착착 진행해서 신나게 다 그어버려야지.
