2024.07.31~ (Day5) - HTML/CSS — Seop

RESULT

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>animal</title>
      <link rel="stylesheet" href="./style.css">
   </head>
   <body>
      <div class="wrapper"> <!--기본적인 레이아웃잡기(식판)-->
         <article class="animal"> <!--독립적인 모듈 컴포넌트 (식판내의 반찬) / div,section, articl등 표현을 쓸쑤있다.-->
            <img src="./images/animal01.png" class="animal-cover"> <!--동물 이미지 적용-->
            <div class="animal-contents"> <!--<main>마크업은 웹 규모가 클때 주로사용 -->
               <h1>Cute animal</h1>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos beatae fuga ex, officia tempore repudiandae commodi blanditiis. Quaerat, quis dolore illo in eaque odit sunt modi omnis necessitatibus saepe veritatis?</p>
            </div>
         </article>
      </div>
   </body>
</html>

CSS

/*CSS Resets*/ /*h1이나 p, 이미지 등 기본적으로 적용되는 기본값이 존재하기에 초기화*/ 
* {
    padding: 0;
    margin: 0; /*또는 initial , unset : 브라우저가 기본적으로 적용되는 기본값을기준으로 자동화하는 것*/
    font-size: inherit; /*폰트사이즈는 initial이아닌 inherit으로 해서 값이 부모를 따라가게 즉, 상속받을수있게 지정*/
    font-weight: inherit; /*폰트 굵기를 부모에 상속받게 지정*/
}

/*이미지나 텍스트를 넣다보면 baseline이 생기는데 그 부분을 없애기위해 이미지 요소 기본스타일 초기화를 해준다.
block 또는 vertical 지정 https://youtu.be/7oOai_rOnuI?si=6SLbsWZzc9dQT1Sn*/
img{
    /* display: block;  */
    /*이미지와 텍스트는 inline 형식이기떄문에 block*/
    vertical-align: top; /**/
}

:root { /*가상클래스 루트 요소 html라고 보면된다. *도 된다.*/
    font-family: 'arial';
}

/* CSS Design*/
body{
    background-image: url(./images/bg.png);
}
.wrapper{
    /* border: 5px solid wheat; */ /*위치 등 레이아웃을 시각적으로 보기위해 설정한다. 여백(마진)이 보이기때문에 (초기값:8px) * 사용*/ 
    /**/
    width: 300px; /*넓이를 300px 지정*/
    margin: 100px auto; /*가운데 정렬*/
}


.animal-cover{
    /* border: 5px solid green; */ /*위치 등 레이아웃을 시각적으로 보기위해 설정한다. 여백(마진)이 보이기때문에 (초기값:8px) * 사용*/ 
}

.animal-contents{
    /* border: 5px solid yellow; */ /*위치 등 레이아웃을 시각적으로 보기위해 설정한다. 여백(마진)이 보이기때문에 (초기값:8px) * 사용*/ 
   background-image: url(./images/green.png); /*잔디 이미지 추가*/
   background-repeat: no-repeat; /*이미지 반복 X*/
   background-color: #9C6035; /*땅색을 지정*/
   border-radius: 0 0 30px 30px; /*땅의 하단에 radius 적용*/
   border-bottom: 10px solid #46260E;
   color: #E8BC9C; /*내부 컨텐츠(h1,p)의 색상 지정*/
   padding: 60px 20px 48px; /*상단10px 좌우 20px 하단 48px*/

   /* box-shadow: 10px 10px; */
   
}

.animal-contents h1{
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

▼ CSS RESET

지난주 프로필 수업 당시 css 초기화를 처음 접했는데 이게 뭔가 싶기도 했을 것이다.

프로젝트를 시작하면, 초기에 먼저 css를 초기화하고 시작하는 것이 좋다.

이렇게 초기화를 해주는 이유는 브라우저마다 기본으로 제공하는 스타일이 있기때문이다.

예를 들면 내가 margin을 지정하지 않았는데도, 알아서 margin값이 들어있어서

내가 원하는대로 화면을 가득채우는 것이 불가능하다.

한번 어느 한 요소를 width를 100%로 지정해보면

margin값으로 인해 화면을 가득 채우지 못하고 있는 것을 볼 수 있다.

▼ :root

root는 문서 트리의 루트 요소를 선택한다.
쉽게말해 HTML의 루트 요소는 <html>요소이므로 :root = html

css 문서에서 사이트를 만들거나 유지보수 할때 여러 곳을 임의로
바꿔야하고 공통 적으로 들어가는 부분들이 있을때
이를 간단하게 변수(--)를 선언하여 사용하면 좀 더 쉽게 작업 할 수 있다.
하지만 우리는 주로 문서의 폰트 변경할때 사용할 것이기에 변수 선언은 나중에 배울 것

▼ background-repeat

repeat. 말 그대로 배경 이미지 반복 여부를 설정하는 속성이다

repeat 속성 값을 no-repeat를 지정하면 이미지가 반복되는 현상이 없어진다.

◆ background-repeat는 repeat, repeat-x , repeat-y , no-repeat , inherit 속성 값을 지정할 수있다.

repeat : 가로 방향, 세로 방향으로 반복
repeat-x : 가로 방향으로 반복
repeat-y : 세로 방향으로 반복
no-repeat : 반복하지 않음
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속받음

▼Caseade

CSS는 Cascading Stylesheets의 약자이다. CSS 스타일은 하위의 요소에 스타일이 상속되거나,

이를 덮어씌울 수 있다는 것을 의미하는데, 어느 경우에 덮어씌워지는지, 혹은 어떤 스타일이 우선순위를 가지는지는지에 대한 문제를 해결하는 알고리즘이 바로 Cascade이다.

Cascade

위치 및 표시 순서
특정성(Specificity)
중요도(Importance)

1. 위치 및 표시 순서

코드를 작성하여 예시를 보자면

div 요소를 하나 만들어서 스타일을 이미지 방식으로 설정 하였다.

그런데 클래스가 동일한 속성을 가지고 있음과 동시에 배경색을 각각 오랜지색과 초록색이 주어질 경우

화면상 출력되는 색상은 무엇일까?

이처럼 동일한 특정성 점수의 선택자를 가지는 경우, HTML 페이지 더 하단에 정의된 스타일을 적용하게 된다.

쉽게 이해하자면 기존 색상에서 덮어쓰기 라고 보면 될 것이다.

같은 이유로, 동일한 클래스를 만들지 않고 하나의 클래스에서 색상을 다르게 적용해보면

마찬가지로 초록색이 출력된다.

2.셀렉터 특정성 (Specificity)

css 선택자가 얼마나 특정 요소를 가리키는지를 의미한다.. 즉, 더 구체적인 css 선택자로 스타일을 정의하는지가 더 높은 우선순위를 가진다. 위에서 배운방법으로 동일한 요소에 대한 스타일이 하단에 정의되어 있더라도

상단에 정의된 규칙이 적용되도록 할 수 있다 특정성은 점수로 계산되어, 점수가 높은 규칙이 적용되며.

동점은 나중에작성된 코드가 우선 적용된다.

마우스 커서를 클래스에 hover 하면 이미지 처럼 선택기 특이성이라고 뜨는데

(0,1,0)을 접근하기 쉽게, 이해하기 쉽게 요즘 올림픽이 한창 진행중이니 금,은,동 으로 설명하려고한다.

div요소에 box, wow, wow2 3개 클래스를 지정했다고 가정해보자

먼저, div 요소에 배경스타일을 보라색으로 설정한다.

div요소 스타일을 보라색을 설정한 것을 지우지않고 .box 클래스에 배경스타일을 초록색으로 설정한다

초록색이 우선 적용 되는 것을 볼 수 있는데, 여기서 적용 순서가 셀렉터 특정성 점수로 나눌수가 있다.

div요소의 배경스타일을 보라색으로 설정하였을때, 특정성 점수는 동메달

box 클래스로 설정 하였을때 점수는 은메달

즉 동메달은 은메달을 이길 수 없으니 당연히 box클래스의 보라색 배경이 우선 적용이 된것이다.

몇개만 더 살펴보자

div.box 로 배경스타일을 하늘색으로 설정 하였을때 특정성 점수는 은메달과 동메달 2개이다.

결국 출력되는 색은 하늘색이다. 계속 해보자

.box.wow의 특정성 점수는 은메달2개이고 div.box는 은메달과 동메달 2개이므로 .box.wow의 은매달2개가 적용된다

여기서 살짝 의심 갈 수있는 부분이 있다.

div.box 메달이 2개이고 .box.wow 메달도 2개인데? 동점이면

당연히 .box.wow의 주황색이 적용 되는게 맞는거아냐?

라고 할 수도 있는데 올림픽에서 순위 계산할때 일본이 동메달1개와 은메달 1개씩 가지고있고

한국이 은메달 2개를 가지고 있다고 가정하면 순위는 한국이 더 높은게 당연하다

그럼 좀 더 나아가서 위치 및 표시 순서에서 배웠던 적용 규칙순서가 당연히 밑에있어서 그런거 아닌가? 할수도있다.

우선 적용 순위는 클래스가 같을때이므로 햇갈려하지 않아야 한다. 단순 특정성 점수가 더 높은 순위가 적용된다,

계속 해보자면

box.wow.wow2 은메달 3개인 빨간색스타일이 우선 적용 되었고

div.box.wow.wow2의 특정성 점수는 은메달3개 동메달1개 이므로 흰색 배경이 적용된다.

이렇듯 특정성 점수에 따라 우선 적용이 되는 것을 알 수가있는데

위치 및 표시 순서처럼 단순히 밑에 있으니까 적용 된다고 잘 못 알 수도있는데

맨 위에 div.box.wow.wow2를 작성하고 그 밑에 .box를 사용해도

특정섬 점수로 인해 무조건 . div.box.wow.wow2 가 적용이 되는 것을 알 수가있다.

결론은 .

작성된 셀렉터가 얼마나 구체적인 방식으로 작성 되었는지 점수로 계산되며 점수가 높은순대로 우선 적용된다

참고로 동점이면 나중에 작성된 코드가 우선 적용된다.

셀렉터는 결국 여러 조합을 통해 사용된다. 조합으로 작성된 셀렉터의 특정성 점수를 파악할 수 있어야 한다.

3. 중요성(important)

!important는 값 속성의 값 별로 우선순위를 강제 하는것이다

!important는 절대적이며 만약 !important 적용된 클래스가 곂치면

그 해당 클래스들도 특정성 점수로 우선순위가 정해진다.

'BootCamp Review' 카테고리의 다른 글

2024.08.06 (Day 8) - HTML/CSS [Flexbox] (0)	2024.08.18
2024.08.05 (Day 7) - HTML/CSS (0)	2024.08.18
2024.08.01~02 (Day 6) - HTML/CSS [bucketlist,citrus,pokemon,timeline] (0)	2024.08.17
2024.07.26 ~ 28 수업 (0)	2024.08.07
2024.07.24 / 25 수업 (0)	2024.07.31

1. 위치 및 표시 순서

2.셀렉터 특정성 (Specificity)

3. 중요성(important)

'BootCamp Review' 카테고리의 다른 글

티스토리툴바