CSS (Cascading style sheets)
css는 웹페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어이다. 오늘은 어제 배웠던 HTML로 웹페이지의 구조를 잘 세우고 css로 꾸며 볼려고한다 쉽게 얘기하자면 색칠공부를 할때 HTML은 밑 그림을 그려놓는 다고 생각 하면 편하고 css는 밑그림을 색칠하면서 나만의 개성을 표출하는? 그런 느낌이라고 나는 느꼈다.
csss는 좋은 사용자 경험을 제공하기 위한 도구로
위에 사진과 같이 같은 HTML 구조이지만 css를 어떻게 사용하는냐에 따라 가독성이 달라진다.
블로그나 글을 볼때도 사람들이 정리해둔 것을 보면 가독성이 좋게 만든 블로그는 사람들이 보기편하고 인기가 많아지는 반면 가독성이 안좋고 자기만 알아볼 수 있게 정리 된 글들은 인기가 없기 마련이다.
즉. 직관적이고 쉬운 UI 제작은 프론트 엔드 개발자의 소양이라는 것을 알 수 있다.
좋은 사용자 경험 즉 UX는 직관적이고 쉬운 UI나온다.
그래서 개발자 또한 많은 경험들을 겪어보고 글을 읽는 유저 입장에서 가독성이 좋은 글을 만들려고 노력해야한다.
css 의 기본 문법 구성은 위에 사진과 같다.
셀렉터 { } 안에 선언을 해주는 것인데 위 사진은 color : red 로 글자 색을 정해주고 font-size : 30 px 로 글 자 크기를 30px 로정해 주었다.
특히 css 는 속성과 값의 끝에는 세미콜론 ; 을 붙이는 습관을 들이는 것이 좋다.
박스모델의 개요.
하나의 웹 페이지를 보면 모든 콘텐츠는 고유의 영역을 가지고 있다. 그 영역은 항상 직사각형으로 이루어져 있기 때문에 박스라고 부르고 css는 박스의 높이, 넓이, 테두리 여백 등 다양한 속성을 가지고 있다.
모든 HTML문서들을 살펴 보면 각각의 영역들이 있고 그 영역들을 css로 바꾸어 줄때 줄바꿈이 되는 block 박스와 옆으로 붙는 inline 박스가 있다.
줄 바꿈이 되는 요소는 대표적은 h1 , p 가 존재하고
줄 바꿈이 되지 않는 요소는 span 이 있다.
block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 된다.
inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것이다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문이고 margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.
박스를 구성하는 요소.
border (테두리)
p{margin : 10px 20px 30px 40px;}테두리는 각 영역이 차지하는 크기를 파악하고 레아웃을 만들면서 그 크기를 시각적으로 확인할수 있다.
margin ( 바깥 여백)
p{margin : 10px 20px 30px 40px;}각각의 값은 top,righ,bottom, left 순으로 시계방향으로 알고 있으면 된다.
padding( 안쪽 여백)
p{padding : 10px 20px 30px 40px;}패딩은 바깥 쪽 여백을 나타내면 마진과 border를 경계로 반대라고 생각하면 편하다.
기본 셀렉터
전체 선택자
모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있다.
유형 선택자
주어진 노드 이름을 가진 모든 요소를 선택합니다. 구문: elementname 예제: input은 모든 input 요소와 일치한다.
클래스 선택자
주어진 class 특성을 가진 모든 요소를 선택합니다. 구문: .classname 예제: .index는 "index" 클래스를 가진 모든 요소와 일치합니다.
ID 선택자
id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다. 구문: #idname 예제: #toc는 "toc" ID를 가진 요소와 일치합니다.
특성 선택자
주어진 특성을 가진 모든 요소를 선택합니다. 구문: [attr][attr=value] [attr~=value][attr|=value] [attr^=value][attr$=value] [attr*=value] 예제: [autoplay]는 autoplay 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.
어제만든 html 뼈대에 css 를 적용해 자기소개 페이지를 꾸며 보았다.
아직은 미숙하지만 구글 서칭을 하면서 간단하게 꾸며 보았다.
주말에 더 공부를 해서 기술 스택들을 쓰고 내 자신만의 포트폴리오를 만들어야 겠다는 생각을 했다.
