TIL HTML/CSS Chapter 4-8.1

finelinefe·2020년 8월 19일
0

HTML/CSS

목록 보기
4/9

CSS = Cascading Style Sheets

상향에서 하향, 위에서 아래로 적용되는 폭포수같은 스타일 시트.
따라서 같은 태그에 선 css 선언후 후 css 변경을 하면 선 css가 아니라 후 css 스타일이 적용된다.

.css = css 스타일 시트의 확장자는 .css로 끝난다

작성방법

  1. head 태그 내에 style 태그를 열어 html 파일 안에 작성 = 가독성이 떨어진다

  2. 태그 속성에 직접지정 = 가독성이 떨어진다

  3. 별도의 .css 파일을 이용한 작성 = 유지보수 및 파일 관리에 좋다. html 파일에서 head 태그 상단에 css 링크를 첨부하여 같이 읽어들일 수 있도록 해야한다. (link href="폴더 내 파일 경로" rel="stylesheet" type="text/css")

  4. tag 이름으로 스타일 적용 = p, div 등 고유 태그에 css를 적용. 그러나 모든 쓰이는 태그에 적용

  5. class = 가장 보편적. 해당 태그, 또는 비슷한 css 사용으로 묶이는 태그에 공통의 클래스 이름을 부여받아 그곳에 작성한다. (.클래스명)

  6. id = 특정 스타일을 지정하고 싶을때 사용하는데. #id 를 붙여준다

그외 css 속성

font-family = 글자체. 글자의 속성

font-size = 글자크기

font-weight = 글자굵기. 옵션은 100 단위 숫자와 normal, bold, bolder와 같은 형용사 가능

font-style = 이탤릭체, 언더라인, 대쉬효과 등 효과를 나타낼 때 사용

color = 글자 색상. 컬러의 이름이나 hexacode, rgb, rgba(opacity 투명도 추가)로도 가능하다

text-align = 텍스트 정렬을 뜻한다. left, center, right가 있다. 기본값은 좌측 정렬로 우선적용된다

margin과 padding = margin 의 경우 해당 컨텐츠의 가로값과 세로값을 제외한 간격이 추가됨. padding 의 경우는 안으로 밀려들어오므로 기존의 가로값과 세로값이 줄어든다(계산필요)

border = 선을 그릴때 쓴다.
Npx solid/dashed 등등 컬러 또는 hexacode로 작성 가능
border-right, left, bottom, top이 있고 각각에 따로 선 지정 가능.
각각의 border 두께는 px 만큼 추가된다. 이를 방지하기 위해
box-sizing : border-box 을 사용한다.

0개의 댓글