23.05.24 학습일기

23.05.24 학습일기

박경선 2023.05.24

✅ CSS 적용 우선순위

  1. !important Style

  2. Inline Style

  3. ID Selector Style

  4. Class Selector Style

  5. Tag Selector Style

중복된 선택자가 있는 경우 외부스타일 CSS우선순위

내부파일 Style> 외부파일 Style

중복된 선택자가 있는 경우 내부스타일 CSS우선순위

!important > Inline > ID Selector > Class Selector> Tag Selector

예시)

h1{
 color : red !important;
}

css는 작성순서 관계 x

✅ CSS 서식관련 속성(텍스트 스타일)

- css 기본 default 값

font size : 16px, 1em, 100%, 12pt

- color

rgba에서 a는 투명도

예시 ) rgba(0,0,0,0.5)

- text-transform

텍스트 대소문자 변환

예시)

text-transform : capitalize; // 단어의 첫 글자를 강제로 대문자로 변경
text-transform : uppercase; //전부 대문자로
text-transform : lowercase;  //전부 소문자로

- text-align

문자 정렬 방법 지정

- line-height(줄간격)

일반적으로 body태그에 넣어 사용 em단위로 사용 왜? 상대적으로 적용하기 위해

✅ CSS 서식관련 속성(목록 스타일) ⭐

css 가상 클래스 :before를 이용해 원하는 기호를 사용할 수 있다 -> 불릿아이콘을 사용

예시 )

.menu li::before{ /*ㅁ+한자키 : 불릿아이콘사용  or 폰트어썸에서 가져와 사용가능*/
  content:'★';
}

- ul태그 속성

disc, circle, square, none

- ol태그 속성

decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha

CSS 자손선택자 vs 자식선택자

HTML 부모요소 vs 자식요소

부모요소 vs 자식요소

CSS 자손선택자(스페이스) vs 자식선택자(>)

index.html
<body>
  <div class="box">
    <div>
      <div></div>
    </div>
  </div>
</body>
</html>
style.css
/*스페이스 : 자손선택자, >는 자식선택자(바로 아래)*/
.box{
  border:1px solid red;
  width:400px;
  height: 400px;
}
.box > div{
  border:1px solid blue;
  width:200px;
  height: 200px;
}
.box > div div {
  width:50px;
  height:50px;
  background-color: black;
}

✅ 상세 디자인을 위한 CSS 박스모델(border, border-radius)

html은 네모난 박스와 같은 상하좌우를 가짐

border-style : solid/dashed/dotted 세가지 가장 많이 사용

border-width : px가장 많이 사용

✅ 상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)

box-sizing ⭐⭐ (레이아웃 지정시 매우 중요!!)

 최초에 정한 너비와 높이를 유지하는 것

왜? border나 padding, marign에 의해 크기가 커지는 것을 box-sizing : border-box 가 방지해줌

최초에 정한 width, heigth가 있을 때,

그 다음에 준 border, margin, padding에 의해 늘어나는 것을 방지
정리 > 최초의 너비값과 높이값을 유지한 채 padding, border를 그 안에 심어라

✅ 상세 디자인을 위한 CSS 박스모델(box-shadow, text-shadow)

box-shadow : 박스에 주는 그림자

[필수속성]

offset-x : 수평 그림자의 offset값(+ : 왼쪽에서 오른쪽으로)

offset-y : 수직 그림자 offset값(+ : 위에서 아래로)

blur : 그림자 가장자리를 부드럽게 처리하는 정도

color : 색상 지정

예시)

index.html
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
</body>
style.css
div{
  background-color: #ccc;
  width:250px;
  height:200px;
  margin:10px;
  border-radius: 5px;
  float : left;
}
.box1{
  /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/
  box-shadow : 5px 5px 20px rgba(0, 0, 0, 0.463);
}
.box2{
  /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/
  box-shadow : 0 0 20px rgba(30, 144, 255);
}
.box3{
  /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/
  box-shadow : 10px 10px crimson;
}
.box4{
  /*box-shadow : (inset : 안쪽쉐도우) x축 이동거리 y축이동거리 퍼진정도 색상*/
  box-shadow : inset 0 0 20px rgba(0, 0, 0, 0.26)
}
.box5{
  /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/
  box-shadow : inset 0 0 20px rgba(255, 255, 255, 0.9)
}

text-shadow : 텍스트에 주는 그림자

index.html
<body>
  <h1 class="heading">Coding Works Class</h1>
</body>
style.css
body{
  background-color: #333;
}
/* text-shadow에서는 inset이 없음 */
.heading{
  font-size: 100px;
  text-transform: uppercase;
  color: gold;
  /* text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); */
  text-shadow: 5px 5px dodgerblue, 10px 10px 0 #90c8ff;
}

퍼블리싱의 모든 것!

✅ HTML 인라인요소, 블록요소, 인라인블록

  • 인라인(inline)요소

  • 블록(block)요소

  • 인라인블록(inline-block)요소

- 인라인요소

✔ 한줄에 여러개 배치

✔ 기본 너비 값은 컨텐츠의 너비값

✔ 크기 값을 가질 수 없음 : width, height를 줘도 작동하지 않음을 의미

✔ 상하 마진은 가질 수 없음

인라인요소

span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio

 

- 블록요소

✔ 한줄에 한개만 배치

✔ 기본 너비 값은 100%

✔ 크기 값을 가질 수 있음

✔ 상하좌우 마진 가질 수 있음

블록요소

div, table, figure, figcaption, caption, header, nav, footer, section, article, asice, p, blockquote, ul, ol, li, td, th, form, hr, h1~h6

 

특징

전체적으로 레이아웃을 잡는 태그

- 인라인 블록요소

✔ 한줄에 여러개 배치

✔ 기본 너비값은 컨텐츠의 너비값

✔ 크기 값을 가질 수 있음

✔ 상하 마진은 가질 수 있음

인라인 블록 요소

img, input태그들, button, fontawesome


예시)

[ 문제상황 1]

상하간격 너무 좁아 margin-top을 주려고 하니 먹지 않음 왜? 인라인요소 이기 때문

이러한 3가지 요소를 변경해주는 방법 => display 속성

display속성에 주로 사용하는 값

block, inline-block, inline, none, flex

✅ CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)

1. 엘리먼트 수평 정렬하기 (속성 : float)

float 속성

float 속성

  • none(default) : float속성 적용 안함

  • inline, block, inline-block관계없이 적용 가능

  • left : 요소가 컨테이너 왼쪽 배치

  • right : 요소가 컨테이너의 오른쪽 배치

  • margin : auto 요소를 중앙에 배치(inline요소는 적용되지 않음, 반드시 block요소만 적용)

 

[ 문제상황 1 ]

부모요소는 자식요소의 높이 만큼 자동으로 늘어나지만

float : left 로 주게되면

부모요소는 자식요소가 없다고 판단해 높이값을 잃음

[ 해결방법 ]

부모요소에 높이값 주는방법

  • heigth : 200px; //자식 요소의 높이 값이 변경되면 이것도 바꿔 줘야 함

  • overflow : hidden; //자식요소의 높이 값의 변화에 따라 높이 값이 변경됨

자식요소에 float가 있으면 부모요소의 높이값을 찾아줘야함 -> overflow:hidden

float성질

  1. 자식 요소에 float성질을 주면 부모 요소는 높이 값을 잃는다

    1. 높이 값을 찾아주는 방법

      1. height지정(단, 자식 요소의 높이 변경 시 변경 해줘야 함)

      2. overflow : hidden

  2. inline, inline-block인 경우 margin-auto 사용 불가

    1. 이땐 부모 요소에 text-align:center사용(자식요소의 inline요소는 중앙정렬)

  3. float 속성 적용되면 다음 요소가 float속성을 상속받음 -> clear속성으로 해제

    1. left : 왼쪽 배치된 float속성 상속 해지

    2. right : 오른쪽으로 배치된 float속성 상속 해지

    3. both : 왼쪽 또는 오른쪽으로 배치된 모든 float속성 상속 해지

예시)

index.html
<body>
  <div class="parent">
    <div class="top">float : none</div>
    <div class="left">float : left</div>
    <div class="right">float : right</div>
    <div class="clear">clear : both</div>
  </div>
</body>
style.css
.parent{
  border : 5px solid red;
  width : 600px;
  
}
.top{
  background-color: purple;
  height:50px;
}
.left{
  background-color: grey;
  height:100px;
  width: 200px;
  float:left;
}
.right{
  background-color: orange;
  height:100px;
  width:400px;
  float: right;
}
.clear{
  background-color: purple;
  height: 50px;
  clear:both; /*앞에 있는 float속성을 다음요소가 상속받는데 이것을 해제해주는 역할*/
}

[중요] 명심!⭐⭐⭐

inline 요소 중앙정렬 방법 : 부모 요소에 text-algin:center;

block 요소 중앙정렬 방법 : 자기 자신에게 margin:auto;

✅ 가로 배치하는 2가지 방법

1. float와 overflow를 사용해 배치(px 정확히 맞춰야함)

예시)

index.html
<body>
  <section>
    <article>article</article>
    <article>article</article>
    <article>article</article>
  </section>
</body>
style.css
section{
  border:5px solid black;
  width: 600px;
  overflow:hidden; /*2. 부모요소의 크기를 보장해주기 위해 사용*/
}
section article{
  background-color: gold;
  width:200px;
  height:100px;
  float:left; /*1. float하면 부모요소는 자식요소가 없다고 판단해 크기가 작아짐*/
  border:1px solid red;
  box-sizing: border-box; /*3. 크기가 맞지않아 한줄로 가로정렬 불가, 이걸 적용하면 해결 가능*/
}

2. display : inline-block으로 배치

예시)

index.html
<body>
  <section>
    <article>article</article>
    <article>article</article>
    <article>article</article>
  </section>
</body>
style.css
section{
  border : 5px solid black;
  text-align: center;/*2. 가운데 정렬하기 위해 부모요소에 지정*/
}
section article{
  background-color: gold;
  width:200px;
  height:100px;
  border:1px solid red;
  display:inline-block; /*1. inline요소는 margin:auto불가*/
}

 

article은 블록요소 (세로배치됨) -> width:100%

❓ 가로 배치 하는 방법?

inline로 변경 => 가로 배치는 되나 width값을 가지지 못함

inline-block => 가로 배치 되면서 width값을 가짐

❓ 가운데 정렬 하는 방법?

본인 선택자에 margin:auto불가

왜? 블록만 가능

❓ 그렇다면 inline은??

부모 요소에 text-align: center설정

선택시 고려사항

크기를 정확히 맞춰야 한다? => float사용

보기 좋게만 가운데 정렬하면 된다 => display:inline-block;

댓글을 작성해보세요.

채널톡 아이콘