인사말
오늘은 CSS에 대해서 배운다 아무리 훌륭한 내부 기능을 갖고 있더라도, UI가 없으면 소용이 없다. 즉, 사용자가 애플리케이션을 사용하게 하려면 UI가 꼭 필요하다. 중요한 UI를 만드는 것이 프론트엔드 개발자의 역할이다.
CSS는 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어 중 하나 라고 한다. 이러한 CSS를 알아보자
CSS
CSS를 사용하면 똑같은 HTML을 이용해도 가독성을 훨신 좋게 만들 수 있다.
CSS 파일을 HTML 파일에 연결할 때는, < link > 태그 안에서 href 속성을 통해 파일을 연결합니다.
< link rel="stylesheet" href="index.css" />
link - HTML 파일과 다른 파일을 연결하는 목적으로 사용한다
rel - 연결하고자 하는 파일의 역할이나 특징을 나타낸다
href - css파일의 위치 추가
color - 글자의 색상을 변경
background-color - 배경 색상 변경
font-family - 글꼴의 속성 , 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있다. 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있다.
font-size 글자의 크기를 변경
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh
px(픽셀) - 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우, 화면의 사이즈가 정해진 경우에 유리
rem - 일반적인 경우
박스
block - 줄 바꿈이 되는 박스 대표적인 예 : < div >, < p >
inline - 옆으로 붙는 박스 : 대표적인 예는 < span >
inline-block - width, height 사용 불가능한 inline
박스 구성 요소
border - 테두리를 실선으로 확인
margin - 바깥 여백
음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다
padding - 안쪽 여백, border를 기준으로 박스 내부의 여백을 지정
overflow - 박스보다 큰 콘텐츠에는 스크롤을 표시, auto를 사용
우리는 레이아웃을 설정할때 테두리 값을 계산하지 않고 만들어 크기가 달라지는 실수를 많이 한다. 그때에 이 값을 사용하자
border-box
border-box는 여백과 테두리 두께를 포함해서 박스 크기를 계산한다. *을 주어 모든 값에 넣어주며 앞으로 레이아웃과 관련된 이야기를 할 때는 border-box 계산법을 기준으로 이야기합니다
셀렉터
전체 셀렉터
*{ }
태그 셀렉터 - 같은 태그명을 가진 모든 요소를 선택
태그명 {}
iD 셀렉터
#태그명
class 셀렉터
.태그명
자식 셀렉터 - 첫번째의 자식만을 선택한다. (ex: 첫번째 자식이 있고 첫번째 자식의 두번째 자식이 있고 두번째 자식의 세번째 자식이 있다면 첫번째 자식만을 선택)
부모 > 자식 {}
후손 셀렉터 - 모든 자식을 선택한다. (ex: 첫번째 자식이 있고 첫번째 자식의 두번째 자식이 있고 두번째 자식의 세번째 자식이 있다면 첫번째,두번째,세번째 자식을 선택)
부모 자식 {}
어려웠던 문제
margin은 상단,우측,하단,좌측 순서로 크기가 나온다. 상단부터 시계방향으로 적용된다 만약 2개라면 상하,좌우로 설정된다.
height = 120이라 칠 경우에
content-box = 160 이다
이유는 위의 Border(10) + 위의 Padding(10) + content(120) + 아래의 Border(10) + 아래의 Padding(10) = 160이기 때문이다
내가 표기한 hight보다 크기가 커질 수 있다
하지만
borderbox = 120 이다
내가 지정한 크기 만큼 실제 크기가 된다 content box의 크기가 줄어들고 총 크기가 120이 된다.
그러므로 border box를 사용하는 것이 좋다
이 문제를 설명해주셨는데 이해가 안돼서 한번 더 해달라고 물어봤다 하하
마무리
오늘 CSS의 기본 개념과 셀렉터에 대해 배웠다. 셀렉터 부분에서의 문제를 풀었는데 너무 어려웠다. 코드에서 이 부분이 이 문법이 맞는가? 라고 묻는 문제가 35문제가 나왔는데 너무 어려웠고 60점 정도 맞았다. 복습을 한번 다 하고 문제를 한번 다시 풀어봐야겠다.
