본문 바로가기

CSS

 (15)
[CSS] Chapter 07. text, list, table의 속성 1. text의 정렬: text-align: text는 style에서 id, class, tag 로 정렬에 대한 모양지정이 가능하다. 해당 기능을 사용하면 웹 페이지를 기준으로 글자의 위치를 조정할 수 있으며, 창의 크기에 상관없이 지정한 위치로 글자 정렬이 진행된다. 기본 형태: {text-align: center} (or center 이외에 좌, 우 등 지정 가능) 2. 줄간격 조정: line-height: 을 이용하여 줄을 변경하면, 줄 사이의 간격이 좁고 일정하다. 해당 style은 지정한 tag, id, class의 줄바꿈 모양을 지정할 수 있다. 단위는 px, %, 0.0 등 다양하게 지정할 수 있다. 단위가 지정되지 않으면 * 배수로 처리된다. 해당 간격의 % 및 배수는 font의 크기에 비..
[CSS] Chapter 06. Color의 이해 1. Hex Color: #000000; ~ #fffff; Hex Color는 색깔의 변화를 Red, Green, Blue을 각각 16진수로 삽입하여 색을 표현하는 방식이다. 16진수는 0~9, a~f 를 조합한 것으로 ff가 가장 높은 수(15)이다. Style에서 Color를 적용할 때, 0~f의 조합을 통해 색을 구현할 수 있다. rgb를 따라 진행하므로 3자리 혹은 6자리로 구현이 가능하다. 기본적으로 #00000 식으로 기입한다. 6자리의 구현이 더욱 정밀하다. 예) color:#0000ff Hex 코드를 10진수로 표현하면 255,255,255 의 숫자로 구성되는데 이는 RGB 값과 동일하다. 때문에 RGB를 통한 색상 지정도 가능하며, RGB의 경우, RGBA 로 추가하여 투명도까지 설정할 ..
[CSS] Chapter 05. font의 속성 1. 크기: font-size 폰트의 크기를 지정하는 방법으로 px 혹은 pt 단위로 지정이 가능하지만, 최근에 사용자의 출력 장치가 다양하여 비율 대비 문자 크기 지정을 많이 사용한다. ◍ em: 대문자 M의 크기가 1em이다. ◍ rem: 페이지의 처음 문자 크기를 1rem이라고 한다. ◍ ex: 소문자 x의 크기를 1ex라고 한다. ◍ px: 모니터의 화소 단위를 기준으로 출력되며, 모니터 1화소가 1px이다. ◍ pt: 워드나 일부 문서의 글자 크기를 말한다. 타문서와 통일 규격을 위해 사용된다. 간략하게 지정하는 font-size는 아래의 정보를 참고하여 지정할 수 있다. ◍ xx-small > x-small > small > medium > large > x-large > xx-large 2...
[CSS] Chapter 04. 그룹을 지정하는 Tag 1. span 태그는 여러 태그들을 묶어주는 분류 태그로, inline element 만큼의 공간을 차지하는 특징을 가진다. 이는 자신의 content만큼만 공간을 할당한다는 것으로, html에서 데이터(태그)를 분류할 때 매우 중요한 역할을 한다. 분배가 목적인 태그이기 때문에 특별한 기능이나 디자인이 없는 것이 특징이다. 2. division의 약어로 div 태그 자체는 특정한 기능과 디자인은 없지만, Mark up 과정에서 데이트를 분류하고 분배하는 역할을 한다. div 태그는 block level element만큼 공간을 할당하는데, 해당 코드의 ‘행 전체’의 공간을 차지한다. html을 통해 화면을 구성하고 구현할 때 ‘가장 많이 사용’하는 태그이다. span 태그와 마찬가지로 특별한 시각적 효..
[CSS] Chapter 03. CSS Selector (선택자) 1. 개요 html은 html5의 표준에 따라 데이터를 마크업하는 프로그래밍 언어이다. html이 발전하면서 브라우저의 연산을 빠르게하고, 프로그래머나 회사 사이의 기법 발전을 통일하기 위해 표준을 정하는 움직임이 발생했다. 웹 표준은 이제 더이상 무시할 수 있는 항목이 아니다. 때문에 프로그래머는 이 표준에 따라 데이터의 값이나 형식을 지정하고, 지정한 형식에 따라 구조를 구성하여 프로그래밍을 진행한다. 웹 표준은 생산성이 증가한다는 장점을 가지지만 개인의 창의성을 저하하는 결과를 가져온다. 마크업은 결국 데이터의 포함관계를 규정하는 것인데, 이러한 규정에 따라 동일한 태그가 다수 사용된다면, 특별히 지정하고 싶은 개발자의 규칙 형성이 불가능하다. 이러한 특성에 따라 특정 태그나 데이터를 골라서 ‘추출..
[CSS] Chapter 02. CSS Style Precedence 1. CSS 스타일의 우선 순위의 개념 데이터 구현에 있어서 데이터의 중요도를 설정하고 구현하는 것은 html을 통한 웹 페이지 제작에서 매우 중요한 의의를 가진다. 데이터의 중요도에 따라 해당 데이터의 구현 방식이나 범위가 변화하고, 자신이 원하는 기능을 구현하는 것에 영향을 미치기 때문이다. 2. Web 브라우저의 데이터 우선 순위 사용자 스타일 시트, 권한: 중요 (블루 라이트 등) 제작자 스타일 시트, 권한: 중요 제작자 스타일 시트, 권한: 일반 사용자 스타일 시트, 권한: 일반 웹 브라우저 기본 스타일 시트 웹 브라우저에서 모양이 구현될 때, 권한에 따라 충돌 오류를 해결하여 구현된다. 1 항목이 가장 높은 권한을 가지고 있으며 우선 구현된다. 즉, 1과 2가 충돌한다면 충돌하는 영역에서 화면..
[CSS] Chapter 01. CSS의 개요 1. CSS란 무엇인가? Cascading Style Sheet 의 약자이며, 종속 연결되는 스타일 지정 문서를 말한다. HTML 태그의 모양을 변경하는 통합 문서체계를 말하며, 구조화 된 내용을 꾸미는 역할을 한다. 2. 브라우저의 기본 스타일 브라우저의 종류에 따라 기본 폰트의 구현이나 스타일이 결정된다. 때문에 개발자는 주로 사용하는 브라우저에 대해서 호환성을 고려하여 개발을 진행한다. Chrome, Microsoft Edge, Safari 등 Major한 브라우저로 개발을 진행하는 것이 용이하다. 3. html에서의 스타일 지정: 명령어의 마무리 지정 [ ; ] 디자인 요소는 복합적으로 이루어져 있다. 때문에 style을 복수로 지정하는 경우가 발생하는데 이런 경우, style 간의 혼동을 방지하..

티스토리툴바