4주차 : html, css언어 : css기초, 선택자, 박스 속성, 배치 속성

소현·2024년 12월 18일
post-thumbnail

CSS(Cascading style sheets)

HTML과 함께 웹 표준의 기본 개념.
html - 문서의 뼈대 만들기
CSS - 뼈대에 디자인 입히기
CSS는 위에 있는 속성보다 아래에 있는 속성이 먼저 적용된다는 특징이 있다.

기본형
선택자{
속성1 : 속성값;
속성2 : 속성값;
}

> 스타일과 스타일시트

스타일 : css문법을 이용해서 속성을 적용한 한 줄
스타일시트 : 수많은 css속성과 값이 모인 하나의 문서

  1. 내부 스타일시트
    html웹 문서에 < head >태그 안에 < style >태그를 이용해 css를 작성하는 방식. html코드와 css코드가 길어질 경우 작성과 수정이 불편하고, 파일크기가 커진다는 단점이 있어 잘 쓰이지 않는다.

  2. 외부 스타일시트★
    css문서를 만들고 css폴더에 따로 분리하여 html과 연결해 쓰는 방식. 기본적으로 실무에서 가장 많이 사용되는 방식으로 문서관리가 편하고 수정이 편리하다는 장점이 있다. 외부 스타일시트를 만들었을때 link태그로 html파일과 연결할 수 있다. link태그는 < head >안에 써야 하며 외부 문서(css, 파비콘 등)를 연결할 때 사용하는 태그.

css파일을 html과 연결하는 link태그의 기본형
< link rel="stylesheet" href="외부파일 경로" />

  • rel : 연결하려는 파일의 형식을 지정하는 속성.
  • href : 파일 경로

> 스타일시트의 우선순위

1번 부터 가장 우선순위가 높다.

  1. 인라인 스타일
  2. 내부 스타일 시트
  3. 외부 스타일 시트

> CSS의 선택자

  1. 태그선택자
    html태그에 스타일을 적용하는 선택자로 태그에 직접 스타일을 적용. 선택자 자리에 태그의 이름을 그대로 써준 후 {속성:"속성명";}을 나열한다. 태그 선택자는 연결된 html파일안에 동일한 태그가 있으면 공통적으로 동일한 스타일을 적용한다. 보통 css초기화 작업에서 많이 사용. 태그 선택자는 우선순위가 가장 낮다.

p {속성:속성값;}
img {속성:속성값;}
=> 선택자 자리에 태그 이름을 그대로 쓴다!

  1. class선택자
    특정한 태그에만 스타일을 적용하고 싶은 경우 사용하는 선택자로, 태그에 class="클래스명" 형식으로 이름을 붙여주면 css에서 이 이름을 가진 태그들만 특별한 스타일을 적용할 수 있다. 두번째 우선순위를 가지며 제일 많이 사용된다. class이름을 지을 때에는 의미에 맞게 지어야 하며 class이름은 다른 태그에도 중복사용 가능하다. class이름은 영문 소문자로 작성 / 공백대신 - , _ 만 사용 / 숫자를 붙일 때에는 영문 소문자 뒤에 붙임.

html에서 이름을 붙일때
< h2 class="title_big" >제목
css에서 불러올때
.title_big{속성 : 값;}

  1. id선택자
    id선택자도 class처럼 태그에 특정한 css속성을 적용하고 싶을 때 이름을 붙여주는 역할을 한다. 이름을 짓는 방법은 class와 동일하나 id로 지은 이름은 단 한 번만 사용이 가능하다. id선택자는 선택자 중에서 제일 우선순위가 높다.

html에서 이름을 붙일때
< h2 id="title">제목
css에서 불러올때
#title{ 속성 : 값;}

< div > : 공간을 나누는 태그

block속성의 대표적인 태그로, 투명한 빈 박스 태그이다.
레이아웃의 공간을 나눌 때 사용하며, a태그와 함께 가장 많이 사용되는 태그이다. 예를들어 제목과 본문을 하나로 묶어 공간을 만들거나, 이미지가 들어갈 영역을 지정하는 등 레이아웃을 나누는 역할을 한다.

< div >
제목태그나 단락태그나 이미지 등을 넣음.
</ div >

border-radius : 박스 둥글기 속성

[기본형]
border-radius : 숫자px 또는 %;
[모서리마다 다른 값. 왼쪽 상단부터 시계방향 꼭지점.]
border-radius : 값1 값2 값3 값4;
[왼쪽 상단부터 대각선 값]
border-radius : 값1 값2;

테두리 속성

테두리에 관련된 속성은 block속성을 가진 모든 태그에 사용할 수 있다. 테두리 속성은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)를 테두리 속성이라고 하며 이 중 하나라도 없으면 테두리가 나타나지 않는다.

[기본형]
border : 두께 스타일 색상;

padding과 margin

padding 안쪽 여백
margine 컨텐츠 사이 여백

[기본형]
padding : 값1 값2 값3 값4;
=> top right bottom left;
padding : 값1 값2;
=> top/bottom left/right;

box-sizing : 컨텐츠 영역을 유지★

박스의 크기를 정할때 width, height를 이용하여 영역의 넓이와 높이를 잡는다. 이렇게 정해진 width, height영역을 '컨텐츠 영역'이라고 한다. 컨텐츠 영역에 적용된 padding, border에 따라 box의 크기는 늘어난다. 이때 컨텐츠 영역을 유지한 상태에서 안쪽으로 padding과 border를 적용하고 싶다면 box-sizing 속성을 이용한다.

  • box-sizing: content-box;
    css box model의 기본으로 width, height 바깥쪽에 padding과 border가 생긴다. 즉, 총 넓이값이 변하며 기본값이다.
  • box-sizing: border-box;★
    padding, border영역을 width,height안쪽으로 포함시킨다. width,height의 크기가 유지된다.

float : 배치속성

float은 사전적인 의미로 '둥둥 떠다니다'라는 뜻이 있다.
박스를 왼쪽이나 오른쪽으로 배치할 때 사용하는 속성.

[기본형]
float : left;
박스를 왼쪽 배치
float : right;
박스를 오른쪽 배치
float : none;
박스를 배치하지 않음

clear : float을 해제하는 속성
clear속성을 사용하면 해당 박스에 적용된 float속성을 해제할 수 있다.

[기본형]
clear : none;
float을 해제하지 않고 유지한다.
기본값으로 clear속성을 쓰지 않은것과 같다.
clear : left; 왼쪽에 적용된 float 해제
clear : right; 오른쪽에 적용된 float 해제
clear : both; ★ 양쪽으로 전부 해제

display : 박스를 배치하거나 고유 속성을 바꿔주는 속성

  • display : block; ★
    해당 요소를 block속성으로 바꾸거나 none으로 숨긴 요소를 다시 나타낼때 사용한다.
  • display : inline;
    해당 요소를 inline속성으로 바꿈.
  • display : inline-block;
    해당 요소를 inline-block속성으로 바꿀 때 사용한다.
  • display : none; ★
    해당 요소를 화면에서 영역까지 모두 숨긴다.

visibillity : 영역은 남겨둔 채 요소만 숨기는 속성
display : none을 사용하면 해당 요소가 차지하고 있던 공간과 해당 요소를 모두 숨겨준다. 하지만 영역은 남겨둔채 요소의 모양만 숨기고 싶다면 visibillity를 사용할 수 있다.

  • visibillity : hidden;★
    요소가 차지하고 있던 공간은 그대로 둔 채 요소만 숨긴다.
  • visibillity : visible;
    기본값으로 요소와 공간을 그대로 보여준다.

★★display:flex★★

부모박스(container)안에 자식박스(item)를 정렬하는 속성.
flex를 적용하는 순간부터 자식박스는 가로로 정렬됨.
이때 자식박스의 가로 넓이의 총 합이 부모박스의 넓이를 넘게 되면 자식박스의 사이즈가 자동으로 줄어들며 부모박스를 채운다. 컨테이너에 flex가 적용되면 자식들을 다양하게 정렬하는 하위 정렬 속성들을 함께 사용할 수 있다.

★ display:flex속성은 부모박스에 적용해야 하며,
이에 따른 하위 정렬속성 또한 부모박스에 적용해야 한다.

< flex 하위 정렬 속성>

1. justify-content
부모박스안에 자식 박스들을 가로로 정렬할때 사용하는 속성.

  • flex-start;
    기본값으로 부모박스안에 자식박스들을 왼쪽에서 오른쪽으로 정렬
  • flex-end;
    부모박스안에 자식박스들을 오른쪽에서 왼쪽으로 정렬
  • center;
    부모박스안에 자식박스들을 가운데로 정렬
  • space-between;
    부모박스 안에 자식박스들을 동일한 여백으로 양쪽 정렬
  • space-around;
    자식박스의 양옆으로 동일한 간격을 주어 정렬
  • space-evenly;
    부모박스안에 자식박스들을 고르게 동일한 간격으로 정렬

2. align-items
부모박스안에 있는 자식박스들을 세로로 정렬하는 속성이다.
부모박스를 기준으로 top/middle/bottom쪽으로 정렬한다.

  • flex-start;
    부모박스의 top위치로 자식박스들을 정렬
  • flex-end;
    부모박스의 bottom위치로 자식박스들을 정렬
  • center;
    부모박스의 middle위치로 자식박스들을 정렬
  • baseline;
    자식박스들을 부모박스의 시작 위치에 정렬
    (= flex-start와 동일한 결과값)
  • stretch;
    자식박스를 부모박스의 높이에 맞춰 늘림. 이때 자식박스에는 height속성이 없어야 함.

3. flex-direction
자식박스의 나열 방향을 정하는 속성. 자식박스를 block속성처럼 세로로 나열하거나 flex의 기본값처럼 가로로 나열할때 주로 사용한다. 속성값에 -reverse가 붙으면 start와 end의 자리가 바뀌게 된다.

  • row;
    기본값으로 flex를 적용한 기본 모습과 같이 가로로 자식박스들을 나열
  • row-reverse;
    자식박스들을 가로로 반전
  • column;
    자식박스들을 위에서 아래로 나열
  • column-reverse;
    자식박스들을 세로로 반전

4. flex-wrap : 감싸기 속성
flex를 적용하게 되면 자식요소들이 부모박스의 넓이보다 넓을때 자동으로 자식의 넓이를 무시하고 1줄에 걸쳐 컨텐츠를 작게 찌그러트린다. 이때 자식의 넓이와 높이를 그대로 유지하고 싶다면 flex-wrap을 사용한다.

  • nowrap;
    기본값으로 모든 자식요소들을 한 줄에 걸쳐 부모박스에 맞춤
  • wrap;
    자식 요소들의 넓이 높이를 유지하며 여러 줄에 걸쳐 정렬한
  • wrap-reverse;
    자식 요소들을 넓이 높이를 유지하며 여러 줄에 걸쳐 반대로 정렬

5. gap : 컨텐츠 사이 여백
gap을 사용하면 flex가 적용된 자식요소 사이에 간격을 만들 수 있다. gap은 컨텐츠 사이에 생기며, 이것을 gutter라고 표현하기도 한다. 값을 1개만 쓰면 row, column방향으로 동일한 간격을 만들어주고, 값을 2개로 나눠 쓰면 앞자리가 column방향, 뒷자리가 row방향이다.

6. flex-flow : 나열방향 + 감싸기 속성
flex-direction(나열속성) + flex-wrap(감싸기속성)을 한꺼번에 선언할때 사용한다. 두 속성의 조합은 많이 사용되기 때문에 한 번에 선언하고 싶을때 flex-flow를 이용할 수 있다. 두 속성의 속성값을 공백으로 구분하여 한 번에 쓴다.

  • flex-flow : 나열방향 감싸기;

ex) flex-flow : cloumn wrap;
-> 세로방향으로 나열하고, 자식요소 넓이 높이 유지함
flex-flow : row wrap-reverse;
-> 가로방향으로 나열하고, 자식요소 넓이 높이를 유지하며 뒤집는다.

profile
소현
이전 포스트

3주: html, css 언어 : 이론, block, inline, 목록태그, 링크태그, 이미지

다음 포스트

5주차 : html, css언어 : 선택자

0개의 댓글