오늘의 공부
CSS
- CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어이다. HTML이나 XML로 작성된 문서의 표시 방법을 기술한다. HTML, Javascript와 함께 오픈 웹의 핵심 언어 중 하나이다.
- CSS를 적용하는 방법은 아래과 같다.
div {
background: red; // div 요소들의 배경색을 빨간색으로 표시한다.
}
#only {
color: red; // id가 only인 요소의 글씨색을 빨간색으로 표시한다.
}
.class {
margin: 10px; // 클래스 명이 class인 요소의 마진을 10px로 표시한다.
}절대단위와 상대단위
- 요소의 크기, 두께 등을 지정하기 위해서 단위를 설정해주어야 한다.
- 지정할 수 있는 단위는 픽셀 등의 절대단위와 상대단위가 있다.
절대단위는 cm, mm, inch, px 등이 있지만 컴퓨터 환경에서 보통 사용하는 유일한 단위는 px이다.
상대단위는 다른 요소의 크기와 관련이 있다. viewport란 사용자에게 보여지는 웹 페이지의 영역이다.
주로 박스의 크기를 지정하는 vw와 vh, 글씨의 크기를 지정하는 em과 rem이 있다.
vw: viewport의 너비의 1%
vh: viewport의 높이의 1%
%: 부모 요소 크기의 % 비율
em: 요소의 글꼴 크기
rem: 루트요소의 글꼴 크기
박스모델
- 요소의 사이즈 크기는 아래 사진과 같이 구성된다.
<div>
</div>div {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
background: yellow;
}-
해당 요소는 너비와 높이를 100px로 지정해주었지만 실제 너비는 120px * 120px이다. 이러한 이유는 기본적으로 box-sizing이 content-box로 설정돼 있기 때문이다.
-
따라서 여백을 포함한 박스의 크기를 지정하려면 box-sizing을 border-box로 설정해야 한다.
div {
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
background: yellow;
}CSS 셀렉터
- CSS에는 요소의 스타일과 레이아웃을 지정할 때, 특정 요소만을 지정해야 할 필요가 있으므로 사용한다.
- .class 와 #id 외에도 많은 셀렉터가 존재한다.
* {
// 전체 셀렉터, 모든 요소를 지정
}
h1{}
p{} // 태그 셀렉터, 같은 태그명을 가진 요소를 지정
div[id="box"] {}
a[href] {} // attribute 셀렉터, 같은 속성을 가진 요소를 지정
body > p {
자식 셀렉터, 자식 요소를 지정
}
body div {
후손 셀렉터, 후손 요소들을 지정
}
div ~ section {
형제 셀렉터, 같은 부모 요소를 공유하는 뒤의 요소들을 지정
}
p + div {
인접 형제 셀렉터, 같은 부모 요소를 공유하는 바로 뒤의 요소 하나를 지정
}
가상 셀렉터
button:link{} // 사용자가 아직 방문하지 않은 요소 선택
button:visited{} // 사용자가 방문한 요소 선택
button:hover{} // 마우스를 요소 위에 올렸을 때 선택
button:active{} // 활성화된 상태일 때 선택
button:focus{} // 포커스가 들어와 있을 때 선택마무리
오늘은 CSS를 학습하면서 유독 더 재미있었다. UI와 UX에 대해 관심이 많았었는데, 이를 구현하는 것에 CSS의 역할이 매우 중요하다는 것을 느꼈다. 바로 시각적으로 들어나는 코드들을 입력해서 그런지 배우는 것도 더 직관적이었다.
Javascript는 의사 코드로 생각한 절차나 필요사항을 글로 쓰면서 나타내긴 하지만 시각적으로 나타나진 않아서 CSS를 배우는 것 만큼의 직관성은 없었는데, 그것 때문에 더 재밌게 느껴진 것 같다.
하지만 직관적인게 출력이 직관적인 것이지 뭔가 CSS의 용어는 직관적이지 않다. 예를 들어 background로 색상을 지정해도 출력해주고, backgroun-color로 지정해도 출력한다. 다만 전자는 이미지를 배경으로 설정할 수도 있다. 이런 것은 이해가 되는데 color가 색상을 지정한다. 한 요소 안에 색을 칠할게 얼마나 많은데 그냥 color가 폰트 색을 지정한다. 가장 기본적으로 다루고 읽는 것이 폰트기 때문에 아무 합성어 없이 color만 다루는 것인가 하는 의문이 있다. 사용한지 오래돼어 그렇다하지만 애매하다. 그래도 hover, visited 등은 되게 직관적인 것 같다.
줌 세션에서 아직 배우지 않은 document.getElementById()나 document.querySelector() 등을 간접적으로 봤다. 주말에는 Javascript 조건문, 반복문, 문자열을 복습하고 저러한 메소드들을 조금 더 공부 해봐야겠다.
