2023.03.17

클래스 선택자는 보통 미리 만들어놓고 html에 적용하는 편이다.

id 선택자는 따로 수정할때 많이 사용한다.

---

background-color는 상속불가.

함수이름() -> 함수호출(함수사용)

ex> url() -> url을 지정하는 함수라고 생각하면 됨.

 

배경을 꾸며주는 CSS속성들

background-color속성 : 웹 문서(HTML)의 요소(태그) 배경색을 지정할때 사용.

background-image속성 : 배경 이미지를 파일로 지정

background-repeat속성 : background-image속성과 함께 사용. 배경 이미지 반복 여부 및 반복 방향 지정

background-size속성 : background-image속성과 함께 사용. 배경 이미지 사이즈를 조절

background-position속성 : 배경이미지를 반복하지 않을 경우에, 배경 이미지를 표시할 위치를 지정

background속성 : 배경관련된 속성을 줄여서 표기, 각 속성값이 다르므로 표기 순서는 상관없음.

 /* 색상 지정시에 rgba함수로 작성시에 (red,green, blue, 투명도*/

            background-color: rgba(11, 18, 26, 0.5);

            /* background-image: url("파일경로");

            이때 파일경로는 문자열('' 혹은 "") 안에 입력되어야 한다. */

             background-image: url("../logo.png");

            background-repeat: no-repeat;

            /* background-size에서 사용되는 속성들

                auto : 원래 배경이미지 크기만큼 표시(기본값)

                contain : 요소안에 배경 이미지가 다 들어오도록 확대/축소

                cover : 배경이미지로 요소를 모두 덮도록 확대/축소

                임의의 크기로 지정 : 백분율(%) 혹은 상수값 으로 지정가능 */

            /* background-size: auto; */

            /* background-position: <수평위치> <수직위치>;

                 수평위치 : left, center, right, 백분율, 상수값으로 지정가능

                 수직위치 : top, center, bottom, 백분율, 상수값으로 지정가능 */

            /* background-position: center center; */

            /* background: url(../logo.png) no-repeat right  */

        }

     

리스트(목록)을 꾸며주는 CSS속성들

• list-style-type속성 : 목록의 글머리 형태 설정
• list-style-image속성 : 목록의 글머리 형태를 외부 이미지로 바꾸는 속성.
  •                            list-style-type속성의 값이 none이어야 함.
• list-style-position속성 : 글머리 아이콘이나 번호를 들여쓰거나 내어쓸 수 있음.
•  

        li{

            /* list-style-type의 다양한 속성값들

            disc : 채워진 원(기본값)

            circle : 빈원

            square : 채워진 사각형

            decimal : 1로 시작하는 숫자

            none : 목록을 나타내는 블릿 제거 */

            list-style-type: none;

            list-style-image: url("../img/rec.png");

        }

        .list-position{

            /* inside, outside(기본값) 둘 중 하나 지정 가능 */

            list-style-position: inside;

---

박스모델과 디스플레이 관련 css

1. 테두리(경계선)에 관련된 css속성들

• border-style속성 : 화면에 표시되는 테두리의 스타일 설정
• border-width속성 : 화면에 표시되는 테두리의 굵기 설정
• border-color속성 : 화면에 표시되는 테두리의 색상 설정
• border속성 : 테두리의 스타일, 굵기, 색상을 묶어서 표기(순서는 상관없음)
• border-radius : 모서리를 둥글게 처리
• box-shadow : 테두리의 그림자효과

border는 속성을 한꺼번에 지정하는 편이다.

 p{

            width: 300px;

            height: 200px;

            /* border-style: solid; */

            /* 테두리의 두께 설정: border-width(네방향 모두 균일하게 설정)

                테두리의 두께를 하나씩 조정가능

                방향 : top, right, bottom, left

                border-width : 상수값, thin, medium, thick

                border-방향-width : 상수값, thin, medium, thick */

            /* border-width: 5px; */

            /* border-top-width : 10px;

            border-bottom-width : 0px;

            border-left-width : thin;

            border-right-width : thick; */

            /* border-width 속성은 두가지(방향)씩 묶어서 표현도 가능*/

            /* border-width: 1px 10px; */

            /* border-width 속성으로도 네가지 방향을 하나씩 설정 가능  */

            /* border-width: 1px 10px 15px 20px; */

            /* border-color : 색상지정 -> 네가지방향을 하나의 색으로 설정

                border-방향-color : 방향별로 색상을 따로따로 지정 가능 */

            /* border-color : red; */

            /* border-top-color : red;

            border-right-color : blue;

            border-bottom-color: green;

            border-left-color: yellow; */

            /* 테두리의 형태, 굵기, 색상 한번에 지정 - border 속성 */

            /* border : solid 2px blue; */

            /* border-top : solid 1px red;

            border-right : dotted 10px blue;

            border-bottom : double 15px green; */

            border : solid 1px black;

           

            /* border-radius : 네 방향의 모서리를 둥글게 처리

                border-방향(상하)-방향(좌우)-radius : 특정 방향의 모서리를 둥글게 처리 */

            /* border-radius: 20px; */

            border-top-right-radius: 5%;

            border-bottom-left-radius: 5%;

            /* box-shadow: 5px 10px 15px 20px; */

2. 여백지정하기(요소간의 여백) margin속성

• margin을 이용하면 요소(태그)와 요소(태그)간의 간격 조절 가능
• 현재 요소의 주변여백

마진 중첩현상: 

        요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진값이 큰 쪽으로 겹쳐지는 현상

        요소를 가로로 배치할 경우에는 상관없음.

 #box-margin{

            width: 200px;

            height: 150px;

            border: solid 1px red;

            margin: 0px 5px 10px 20px;

            /* margin : 전체적으로 적용, 두방향씩 묶어서 설정, 네방향 각각 지정 가능

                margin-방향 : 상하좌우 각각 margin값 지정가능 */

        }

 

3. 여백지정하기(박스 내부의 간격) padding속성

• 요소 내부의 콘텐츠 영역과 테두리(border)사이의 여백

padding : 전체 여백설정, 두방향씩 묶어서 제어, 네방향을 각각 제어 가능

                padding-방향 : 특정방향에 대해서 각각 제어가 가능 

4. display속성 : 요소들의 배치 방향 설정을 보조하는 역할

   [상단메뉴 UI만들기 함]

   ul li 태그(display속성)를 inline방식으로 수정해서 메뉴 많이 만드는 편.

 

    display속성이 inline 방식인 태그를 block방식으로 수정함.

 display: inline; -> display: block;

 

display속성의 대표적인 속성값

• inline : 수평으로 디스플레이(배치), 컨텐츠에 해당하는 크기만큼 영역을 가진다.
  요소들의 크기를 설정할 수 없다.
• block : 수직으로 디스플레이(배치), 한 줄씩 영역을 가진다.
  요소들의 크기를 설정할 수 있다.
• inline-block : 수평으로 디스플레이(배치)하면서 요소들의 크기도 조절이 가능.

/* * : 모든 태그를 의미 */

 

---

테이블 관련 css들

• border : 테이블의 테두리와 셀의 테두리 지정(두가지 전부 지정해야한다.)
• border-collapse : 테이블의 테두리와 셀 테두리를 합칠지 여부를 설정
• empty-cell : 테이블 테두리 설정을 분리시켜준 상태에서 내용이 없는 빈 셀들의 표시 여부를 설정