코드스테이츠 we win 20주 Full Pre 11기 🔥
네번째 날
혼자 하는 날
첫번째 페어와의 프로그래밍 시간이 끝나고, 두번째 페어를 기다리며 오늘은 혼자 공부하는 날! 😋
HTML, CSS의 기초를 배우고 연습해보면서 드디어 Visual Studio Code 를 키게 되었다.
HTML 과 CSS는 내가 제일 좋아하는 부분인데 개인 프로젝트나, 예전에 큰 프로젝트 했을 당시 겪었던 어려움이 다시금 떠올랐다.
Office hour시간에 튜터님께서 말씀하시길 CSS가 쉬워보일 수 있지만, 나중에 큰 프로젝트를 하게되면 그렇게 쉽지만은 않을거라는 말을 하셨다. 이건 나도 종종 느끼는 부분이다.
프로젝트가 커질수록 내가 어떤곳을 바꾸려고 했을 때 의도치 않게 다른곳이 바뀌는 상황도 일어나고..이런 일들이 없게 하기 위해서 html을 잘 작성하고, 세분화하는 기초 작업을 더 튼튼하게 할 필요가 있을 것 같다.
연습 또 연습이 살길!
웹 개발과 HTML & CSS & Javascript
HTML의 중요 태그
- div 태그는 한줄을 차지함.
- span 태그는 컨텐츠 크기만큼 공간을 차지함.
- img 태그는 src 속성으로 이미지 링크를 걸 수 있음 (닫는 태그 없음)
- input 태그는 텍스트 박스로 type 속성으로 여러가지 기능(password, text, email, checkbox, radio 등) 가능
- 2개 이상의 input 태그 type = "radio"를 쓸 때는 name 속성값을 맞춰주어야만 같은 그룹으로 인식한다. (radio버튼은 하나만 선택 / checkbox 는 다수 선택)
- textarea 태그는 줄바꿈 가능한 텍스트 쓰는 멀티라인
- ul 태그는 unordered list(목록)의 약자로, 순서가 없는 데이터를 표현하는 경우 사용
- button 태그는 클릭할 수 있는 버튼 생성 가능.
HTML 속성(attribute)는 두 가지로 구성: attribute name(속성의 이름), attribute value(속성의 값)
CSS는 스타일링
- 적당한 위치에 콘텐츠 배치 (레이아웃)
- 텍스트 강조와 같은 최소한의 타이포그래피(조판, typography)
- 최소한의 접근성 (예를 들어 색상)
위 세가지 요소를 갖추고 있어야 더 나은 사용자 경험(UX; User Expirenece)을 갖게 된다.
class 와 id의 차이점
- class
- '.' 으로 선택
- 목적에 맞게 자유롭게 이름 붙일 수 있음
- 동일한 값을 갖는 엘리먼트 많음
- 엘리먼트가 여러 값을 가질 수 있음
- 스타일의 분류(classification)에 사용
- id
- '#' 으로 선택
- 목적에 맞게 자유롭게 이름 붙일 수 있음
- 문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐
- 엘리먼트 단 하나의 값을 가짐
- 특정 엘리먼트를 이름 붙이는 데 사용
단위
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
박스 크기 측정 기준
레이아웃 관련된 이야기를 할때에는 border-box계산법을 기준으로!
박스 측정 기준의 기본값은 content box이지만, border-box를 권장함.
대부분의 css 파일에 아래 코드를 추가 시키는 것을 권장.
* {
box-sizing: border-box;
}
Sic Parvis Magna 🧩