yubyeong

CSS 핵심개념(1) 본문

Web Development/CSS

CSS 핵심개념(1)

yubyeong 2023. 9. 29. 20:29
  • CSS 규칙 : 태그 하나 하나 속성을 지정하는 것이 아니라 한번에 합쳐서 속성을 지정해주는 것( 태그의 개수가 많아지면 한번에 지정해주는 것이 편리)

(head 태그에 지정)

ex)

<h2 style=”#111111”>hello</h2>
<h2 style=”#111111”>hi</h2>

→ 

h2 {
color #111111;
}
  • 아이디 : 같은 태그를 사용하지만 하나의 태그만 따로 선언하는 경우에 사용
  • 페이지 안에서 아이디가 중복이 되면 안됨.

맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법. 참고로 예를 들어서 아이디 이름이 yubyeong인 태그에 글자색을 넣으려면 아래와 같이 사용.

<h3>oo대</h3>
<h3 >oooooo과</h3>
<h3>oo학번</h3>
<h3 id="yubyeong">yubyeong</h3>
#yubyeong {
color: #□□□□□□;
}
  • 클래스(class)

아이디는 여러 개의 요소에 중복해서 사용할 수 없기 때문에 클래스 사용.

맨 앞에 마침표를 붙여서 (클래스이름) 같은 문법으로 사용.

ex) 이름이 JOONGBU인 모든 태그에 글자 크기와 굵기를 넣으려면 아래와 같이 사용.

<h3 class="JOONGBU">00대</h3>
<h3 class="JOONGBU">0000학과</h3>
<h3 class=”JOONGBU”>00학번</h3>
<h3 class="JOONGBU” id=”yubyeong”>유병</h3>
.JOONGBU {
font-size: 16px;
font-weight: 400;
}
  • 크기를 나타내는 단위 : 픽셀, 퍼센트, em, rem

 

  • 퍼센트 % : 1. 부모 태그에 대해서 상대적인 크기

        - 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨.

 

             ex) 부모 태그의 크기: 200px x 100px

                   자식 태그의 크기: 50% x 50% → 100px x 50px

  • em

. CSS에서 em은 부모 태그 font-size의 크기

예를 들어서 부모 태그 글자 크기의 4배를 하고 싶다면, 4em처럼 쓰면 됨.

  • rem

         rem은 <html> 태그의 font-size 크기

         예를 들어서 <html> 태그 글자 크기에서 2배를 하고 싶다면, 2rem이라고 쓰면 됨.

  • 주석 처리 (코멘트)

       /* 로 시작해서 */로 끝나는 코드.

       코드를 읽는 사람들을 위한 거고, 실행에는 아무런 영향을 주지 않음.

  • 줄 높이 line-height : 줄과 줄 사이의 간격을 조절할 때.font-size가 16px이라면 line-height: 1은 16px * 1 = 16px이 되고, line-height: 1.5는 16px * 1.5 = 24px이 되는 식.
  • 줄 높이의 값인 line-height는 단위 없이 쓰는 글자 크기에 상대적인 값.

 

  • 텍스트 꾸미기 text-decoration

텍스트에 밑줄을 넣거나, 취소선을 넣을 때 사용하는 속성.

속성 값 none: 밑줄 없애기(a 태그의 링크 밑줄 없애기)

text-decoration: none;

underline : 밑줄

line-through : 취소선

 

  • 배경 이미지 꾸미기 background
  • - 배경 이미지배경의 위치 background-position
  • - 배경의 반복 background-repeat
  • -  배경의 크기 : background-size
  • -  background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 /
  • -  background-size: contain; / 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 /
  • -  background-size: 40px 30px; /* 가로 40px 세로 30px */
  • -  background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값)* /
  • -  background-repeat: no-repeat; / *반복 안 함 */
  • -  background-position: top; /* 위 */
  • -  background-position: right; / *오른쪽 */
  • -  background-position: bottom; / *아래 */
  • -  background-position: left; / *왼쪽* /
  • -  background-position: left top; / *왼쪽 위 (지정하지 않았을 때 기본값) */
  • -  background-position: center; /*중앙정렬*/

 

  • CSS 그라데이션 넣는 법 : 그라디언트

기본적으로 시작 색상과 종료 색상으로 사용할 수 있음.

 background-image: linear-gradient(#000000, #ffffff);

기본 방향의 각도는 180도. (위에서 아래로 내려오는 방향) 이 각도를 바꾸고 싶다면 맨 앞에다가 각도를 써 주면 됨.

각도의 단위는 deg.

* 구글에서 gradient generator 검색해서 다양한 그라디언트 코드 사용 가능.

이미지와 그라디언트를 같이 사용할 때:

background-image: 
      linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)),
      url("이미지 주소");
  • 그림자

box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);

/* 가로: 5px 세로: 10px 흐린 정도(Blur): 15px 퍼지는 정도(Spread): 8px 색상: rgba(0, 0, 0, 0.6) */

* 구글에서 box shadow generator 검색해서 그림자 코드 사용 가능.

  • 불투명도

opacity: 0.5; 1에 가까워질수록 불투명 0에 가까워질수록 투명.

*{

box-sizing: border-box;

} *: 모든 요소

  • 박스 모델( box model )

HTML/CSS에서 요소는 기본적으로 박스 형태. 밖에서부터 차례대로 바깥 여백인 마진, 테두리인 보더, 테두리와 실제 내용 사이의 여백인 패딩, 그리고 실제 내용이 들어가는 콘텐트 박스.

  • border 속성

주로 굵기, 테두리 종류, 색상 순서. 예를 들어서 아래 코드는 2px 굵기의 실선으로 옅은 회색(#ededed)을 사용.

border: 2px solid #ededed;
  • border-radius 속성

박스 모델의 모서리를 둥글게 만들 때 사용. border 속성 없이도 쓸 수 있다. 아래 코드는 16px 만큼 둥글게 하는 코드.

border-radius: 16px;

* 타원 만들기.

아래 코드는 50% 만큼 둥글게 하는 코드. 타원 형

border-radius: 50%;

* 알약 형태 만들기.

아래 코드는 9999px 만큼 둥글게 하는 코드, 이렇게 아주 큰 값을 지정하면 알약 형태가 된다.

border-radius: 9999px;
  • box-sizing 속성

기본적으로 요소에 크기를 지정하면 그 크기는 박스 모델에서 콘텐트 영역에 대한 크기. 예를 들어서 아래 #box 요소의 실제 너비는 100 + 30 + 30 = 160.

#box {
  margin: 20px;
  padding: 30px;
    width: 100px;
}

만약에 이런 게 아니라 좀 더 직관적으로 크기를 지정하고 싶다면, box-sizing 속성을 바꿔 주면 됨. 기본 값인 content-box 대신에 border-box를 사용함.

#box {
  margin: 20px;
  padding: 30px;
    width: 100px;
    box-sizing: border-box;
}

이렇게 하면 테두리까지 모두 합친 영역의 크기가 100px.

  • overflow 속성

박스의 크기를 지정했을 때 내용이 많아 삐져나오는 것이 오버플로우

박스에 넘치는 것 감추기 - overflow: hidden;

박스에 넘치면 스크롤 - overflow: auto;

항상 스크롤 - overflow: scroll;

  • 마진 상쇄
  • 일반적으로 세로 마진은 서로 겹쳐서 화면에 나타남. 서로 이웃한 태그에서 세로로 마진을 겹쳐서 적용하고, 부모 자식 관계 태그에서 또한 세로로 마진을 겹쳐서 적용. 이때 부모 태그에 padding이나 border가 있으면 경계가 있다고 생각하여 세로 마진을 겹치지 않는다.
  • 예시 1. 서로 이웃한 태그
  • #a와 #b의 마진을 겹치면 둘 사이의 마진은 30px
<div id="a">a</div> 
<div id="b">b</div>
#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

 

  • 예시 2. 부모자식 태그
  • #b와 #c는 부모 자식 관계. #b에는 따로 경계가 없으니까 둘의 마진을 겹쳐서 위쪽 마진은 40px. 이 마진 값을 이웃한 #a와 겹치면, #a와 #b 사이의 마진은 40px.
<div id="a">
  a
</div>
<div id="b">
  <div id="c">
    c
  </div>
  b
</div>
#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

 

  • input 태그

인풋 태그에는 값을 입력하지 않았을 때 기본적으로 보여주는 메세지 존재.

이것을 placeholder라고 한다.

<input name="username" placeholder="Email 또는 전화번호">

이때 placeholder 의 디자인을 바꾸려면 CSS 선택자로 아래처럼 ::placeholder 를 활용.

input::placeholder {
  color: #dddddd;
}

 

'Web Development > CSS' 카테고리의 다른 글

CSS 핵심개념(2)  (1) 2023.09.29
'Web Development/CSS' Related Articles more