깡뇽

[Front-End] CSS 배우기 : 꾸미기 본문

Web/HTML & CSS

[Front-End] CSS 배우기 : 꾸미기

깡뇽 2021. 1. 27. 23:42
반응형

< 더 많은 꾸미기 방법들 >


① 이미지 둥글게 바꾸기
ex) border-radius를 50%로 하면 원이 된다. 50%보다 작게하면 사각형에서 모서리가 조금 둥글게 된다.

img {
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
}

 

② 위치 바꾸기 : position을 이용해서 위치를 바꾸줄 수 있다.

ex) id가 box인 녀석을 position: absolute를 하여 절대적으로 윗공간이 7px가 되는 위치에 배치시켰다.

#box {
  position: absolute;
  top: 7px;
}

⤷ 더 많은 위치 변경 정보를 배울 수 있는 사이트

developer.mozilla.org/en-US/docs/Web/CSS/position

 

position - CSS: Cascading Style Sheets | MDN

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. The source for this interactive example is stored in a GitHub repository. If you'd l

developer.mozilla.org

 

③ 디스플레이 ♨내가 아직 잘 이해하지 못한 부분♨

ex) box 안에 왼쪽에는 left를, 오른쪽에는 right를 넣어 둘 수 있다.

#box {
  border: 10px solid black;
  width: 100px;
  height: 100px;
  margin: 25% auto;
}

#left {
  border: 5px solid red;
  width: 40px;
  height: 90px;
  display: inline-block;
}


#right {
  border: 5px solid blue;
  width: 40px;
  height: 90px;
  float: right;
}

⤷ 더 많은 디스플레이 변경 정보를 배울 수 있는 사이트

developer.mozilla.org/en-US/docs/Web/CSS/display

 

display - CSS: Cascading Style Sheets | MDN

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types. The outer type

developer.mozilla.org

 

④ 패딩과 마진

ex) padding과 margin을 사용해서 box의 크기와 위치를 설정할 수 있다.

#box {
  padding: 0 30px;
  margin: 100px;
}

 

< 중요 개념 복습 및 강화>

- 세미콜론( ; ) 잊지않기 → 안쓰면 해당 스타일링은 실행안됨


- 대체 글꼴 → 글꼴 이름을 여러 개 적어 대체할 수 있는 글꼴들을 지정해주자

 

- 조합기 : 중첩된 요소에서 조합하여 원하는 요소를 선택할 수 있다.

ex) article 태그 내에 guide 클래스의 글꼴 크기를 변경할 수 있다.

article .guide {
  font-size: 18px;
}

 

- 인라인 HTML -> 삭제하고 CSS에서의 선택기로 변경할 수 있다.

<!-- 1. html 다른 꾸미기 요소 태그 내부에 style 작성 삭제 -->
<!-- 2. CSS로 이동 후 선택기와 함께 CSS 꾸미기 코드 작성 -->
<!-- 3. html 내부에 <head>태그 안에 <link>태그를 삽입 -->
<link rel="stylesheet" type="text/css" href="style.css"/>

 

- 사용하지 않는 CSS선택기 → 사용하지 않게되면 삭제해서 stylesheet를 보기 좋게 관리하자.

- 특이성 : 태그 선택기 -> 클래스 선택기 -> ID 선택기 -> !important 규칙 순서로 더 큰 힘을 가진다.

⤷ 특이성과 관련한 정보를 담고있는 사이트

developer.mozilla.org/en-US/docs/Web/CSS/Specificity#selector_types

 

Specificity - CSS: Cascading Style Sheets | MDN

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors. Specificity

developer.mozilla.org

 

반응형
저작자표시 비영리 변경금지

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

[Front-End] CSS 배우기 : Box 모델 (2)  (0) 2021.01.31
[Front-End] CSS 배우기 : Box 모델  (0) 2021.01.31
[Front-End] CSS 배우기: Typography  (0) 2021.01.25
[Front-End] CSS 배우기 : 색상  (0) 2021.01.24
[Front-End] CSS 배우기 : Semantic CSS  (0) 2021.01.24
'Web/HTML & CSS' Related Articles more