Phobiing

CSS 정리 본문

PRogramming

CSS 정리

phobi 2023. 4. 8. 19:45

css -> 모듈로 구성되어 있음 -> 필요한 부분만을 선별하여 탑재할 수 있도록 되어있음

기본적인 위치 : <head> 요소 안의 <style> 태그 

<모듈>

  • 선택자 = 스타일 변경하고 싶은 HTML 요소 / 선언 : 요소를 어떻게 그리는지 기술 - { } 안쪽 부분 / 속성 : 이름:값 형식
  • 박스모델
  • 배경 및 경계선
  • 텍스트 효과
  • 2차원 및 3차원 변환
  • 애니메이션
  • 다중 컬럼 레이아웃
  • 사용자 인터페이스

선택자

- 아이디 선택자 : <p id="special"></p>라면 <style>태그에서 #special{ }으로 표기

- 클래스 선택자 : <p class="special"></class>라면 <style>태그에서 .special{ }으로 표기

    -> 몇 개의 요소들을 하나의 클래스로 묶어 스타일을 지정할 때 사용 / 아이디 , 클래스 이름은 숫자로 시작하면 안됨

    만약 p 요소에서 id special인 것을 선택하려면 => p.special { }이어야함

- 자손, 자식 선택자

s1 s2 : 후손관계

s1 > s2 : 자식관계

 

- 의사 클래스 : 우리가 어던 요소에 별도의 클래스를 정의하지 않아도, 클래스가 정의된 것처럼 간주

::before : 요소의 시작 부분에 콘텐츠 추가 - content 속성 사용해 내용추가

::after : 요소의 끝 부분에 콘텐츠 추가

::first-child : 현재 요소의 첫 번째 자식 요소 선택

::first-letter : 요소의 첫 글자에 스타일 정의

:link : 방문하지 않은 하이퍼링크

:visited : 방문된 하이퍼링크

:hover : 요소 위에 마우스가 있는 상태

:nth-child() : 요소의 n번째 자식 선

 

스타일시트

- 내부 스타일 시트 : HTML 안에 CSS 정의하는 것 / <head>태그 안의 <style>태그에 넣기

- 외부 스타일 시트 : CSS 파일을 외부에 저장하는 것 / <link> 태그 이용하여 연결 -  단순한 텍스트 파일 = 어떤 텍스트 편집기도 작성가능

                                 <link type="text/css" rel=''stylesheet" href="mystyle.css"> : <head>태그 안에

                                 <style>태그 안에서 @import url(mystyle.css) 로도 불러올 수 있음

- 다중 스타일 시트

웹 브라우저 디폴트 값 < 외부 스타일 시트 < 내부 스타일 시트 < 인라인 스타일 시트 (우선순위)

부모요소의 스타일은 자식 요소에 상속됨

 

속성

<색깔>

이름 / 16진수 (#FF0000) / 10진수 (rgb(255, 0, 0)) / 퍼센트 rgb(100%, 0%, 0%)

color : 글자색 

background-color : 배경색

 

<폰트>

font : 한줄에서 모든 폰트 속성 설정 / 나열 순서 : font - style - variant - weight - size - family  안썼으면 디폴트값

font-weight : 폰트 볼드체 여부 / bold & normal

font-size : 폰트 크기 / px 단위 설정(절대 크기), % 단위 설정(상대크기 - 부모요소 기준), em 단위 설정(상대크기 - 부모요                     소 기준) / 키워드 설정 (ex-small : 12px)

font-style : 폰트 스타일 / normal, italic(미리만들어진 폰트 존재경우), oblique(정상적인 폰트 그리는 과정 중 기울인 폰트)

font-family : 폰트 패밀리-특징 공유하는 폰트의 집합 / 마지막엔 가장 일반적인 폰트를 지정해야함 

 

<텍스트 스타일>

text-align : 텍스트 수평 정렬 지정 / left, right, center, justified(양쪽 정렬) : 양쪽을 가지런하게 맞춰주는 정렬방식

text-decoration : 텍스트 장식 지정 / overline, underline, line-through / text-decoration-color = 선 색깔

text-indent : 텍스트 들여쓰기 지정

text-shadow : 그림자 효과 지정 /  x방향이동거리  y방향 이동거리  흐림정도  그림자색상

text-transform : 대소문자 변환 지정 / uppercase, lowercase, capitalize

direction : 텍스트 작성방향 지정 (가로,세로)

letter-spacing : 글자 간 간격

line-height : 텍스트 줄의 높이 지정

word-wrap : 자동으로 단어를 잘라서 다음줄로 넘기는 기능 / break-word 속성 : 단어가 길때 자동으로 줄바꿈하기

+word-spacing : 단어 간 간격

 

<다중컬럼>
- colum-count : 분할해야 하는 컬럼 수 지정

- colum-gap : 컬럼 사이의 간격 지정

- colum-rule : 컬럼을 분리하는 선의 너비, 스타일 및 색상 설정

 

박스모델 : 요소들을 박스 (사각형 형태로 그리는 것)

- content : 박스의 내용물

- padding : 콘텐츠와 경계 사이의 영역 (배경색 투과 가능)

- border : 패딩과 내용물을 감싸는 경계

- margin : 경계선과 다른 요소 사이의 공간 (투명)

 

경계선

경계선 스타일 : border-style / groove, ridge, inset, outset 의 경우 약간의 3D 효과 발생

경계선의 폭 : border-width / border-style 설정되어 있어야 border-width 동작함

경계선의 색상 : border-color 

둥근 경계선 : border-radius

경계 이미지 : border-image (9구역으로 나누어져서 사용됨)

border : 두께 / 스타일 / 색상    => 반드시 border-width, border-style, border-color 순서로 적어야함..

 

요소

auto : 브라우저가 크기를 계산 (디폴트 값)

length : 크기를 px, pt, cm 단위로 지정가능

% : 크기를 컨테이너 블록의 퍼센트로 지정

initial : 크기를 디폴트값으로 설정

inherit : 마진이 부모 요소로부터 상속

 

마진  - 배경색 영향 X

auto : 브라우저가 마진 계산

length : 마진을 px, pt ,cm 단위로 지정가능 (디폴트값 = 0)

% : 마진을 요소 폭의 퍼센트로 지정

inherit : 마진이 부모 요소로부터 상속

margin : top right bottom left

 

패딩 - 배경색 영향 O

length : px, pt, em 단위로 패딩 설정

% : 패딩을 내용물의 퍼센트로 지정

 

배경 설정

background : 한줄에서 모든 배경 속성 정의

-> ___ { background : 배경색  url ( )  반복  위치 }

background-attachment : 배경 이미지 고정 & 스크롤 되는지

background-color : 배경색 정의

background-image : 배경 이미지 정의

-> background-image : url ( ' back.gif ' ) ;

background-position : 배경 이미지의 시작위치

background-repeat : 배경 이미지 반복 여부

 

- 링크 스타일

a : link = 방문하지 않은 링크의 스타일

a : visited = 방문된 링크의 스타일

a : hover = 마우스가 위에 있을 때의 스타일 - 반드시 link / visited 다음에 위치해야함

a : active = 마우스로 클릭되는 때의 스타일

 

- 리스트 스타일

list-style : 리스트에 대한 속성을 한 줄로 설정

list-style-image : 리스트 항목 마커를 이미지로 지정

list-style-position : 리스트 마커의 위치를 안쪽 / 바깥쪽인지 지정

list-style-type : 리스트 마커의 타입 지정

 

- 테이블 스타일

border : 테이블의 경계선

border-collapse : 이웃한 셀의 경계선을 합칠 것인지 여부

width : 테이블의 가로길이

height : 테이블의 세로길이

border-spacing : 테이블 셀 사이의 거리

empty-cells : 공백 셀을 그릴 것인지 여부

table-align : 테이블 셀의 정렬 설정

caption : 테이블 제목 추가

nth-child : n번째 행을 다르게 만드는 선택자 (tbody 안의 요소에만 적용됨)

 

입력양식 꾸미기

- 특정 속성을 가지는 입력요소 선택 : ex) input [ type = text ]

 

효과

- 투명도 : opacity (0.0 ~ 1.0까지 조절 가능)

- 가시성 : visibility ( hidden : 요소가 보이지 않게 - 자리는 차지하고 있음 / visible (기본값) : 요소가 보이게 )

+ display : none ;  -> 자리도 차지하지 않음 (완전히 제외됨)

- 전환 (지속시간이 지정되지 않으면 발생하지 않음 ) : transition

 

CSS3 변환

transform : translate (10px, 10px) = 평행이동

transform : rotate (45deg) = 회전

transform : scale (2, 1.2) = 크기변환

transform : skew(20deg, 10deg) = 비틀기 변환

transform : matrix () = 일반적인 변

 

translate3d(x,y,z)

translateX(x)

translateY(y)

translateZ(z)

scale3d(x,y,z)

scaleX(x)

scaleY(y)

scaleZ(z)

rotate3d(x,y,z,angle)

rotateX(angle)

rotateY(angle)

rotateZ(angle)

perspective(n) : 원근변화

 

'PRogramming' 카테고리의 다른 글

JAVASCRIPT 정리  (0) 2023.04.08
HTML 정리  (0) 2023.04.08