멋사 프론트엔드스쿨 8일차 (04.06)

이예은·2022년 4월 6일
0

멋사_프론트엔드_스쿨_2기

목록 보기
5/7
post-thumbnail

css

선택자

1.전체 선택자

전체 선택자를 통해서 모든 html요소에 접근을 할 수 있습니다.
이를 통해 문서 전체에 공통적으로 기본값을 지정할 수 있습니다.
전체 선택자는 *을 사용하여 나타냅니다.

* {
    margin: 0 auto;
}

2.타입 선택자

타입 선택자는 태그 이름을 사용하여 나타냅니다.
해당 태그의 이름에 해당하는 모든 태그에 속성을 적용합니다.

p {
    color: red;
}
h1 {color: red;}

3.아이디 선택자

id 속성은 페이지에 있는 해당 요소를 유일하게 식별할 때 씁니다. 같은 페이지 안에 id값은 유일해야합니다. id="firstid"라는 아이디는 단 한개만 존재해야합니다.

<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    #blue { color : blue;}
  </style>
</head>
<body>
  <p>이 문단은 평범한 p태그를 사용하였습니다.</p>
  <p id="blue">이 문단은 blue id를 부여하였습니다.</p>
</body>

아이디 속성을 이용하여 현재 페이지에서 이동하는 해쉬 링크를 만들 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <style>
    #one{
        color: red;    
    }
    
    #two{
        color: blue;
    }
    
    #three{
        color: green;
    }
    </style>
</head>
<body>
    <a href="#one">one으로 가라</a>
    <a href="#two">two으로 가라</a>
    <a href="#three">three으로 가라</a>
    <h1 id="one">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="two">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="three">hello</h1>
  	<p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</body>
</html>

4.클래스 선택자

class 속성은 id 속성과 마찬가지로 해당 요소를 식별할 때 사용합니다. 그러나 id속성은 한페이지에 하나만 존재해야하지만 class 속성은 한페이지에 여러 개가 존재할 수 잇습니다.

<head>
  <meta charset="utf-8">
  <title>id</title>
  <style type ="text/css">
    .blue  { color          : blue;      }
    .bic   { font-size      : 20px;      }
    .upper { text-transform : uppercase; } /*text-transform : 컨텐츠를 대문자로 만듭니다.*/
  </style>
</head>
<body>
  <p>이 문단은 평범한 p태그를 사용하였습니다.</p>
  <p class="blue">이 문단은 blue class를 부여하였습니다.</p>
  <p class="blue bic">이 문단은 blue, bic class를 부여하였습니다.</p>
  <p class="blue upper">이 문단은 blue, upper class를 부여하였습니다. </p>
</body>

선택자 우선순위

1. 후자 우선의 원칙

동일한 선택자가 연속으로 사용되었을 경우 후자가 우선합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <style>
            p {
                color: red;
                font-size: 20px;
            }
    
            p {
                color: green;
            }
        </style>
    </head>
    
    <body>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, dolor voluptatem inventore deleniti eligendi omnis corporis iste adipisci consectetur ad officia quasi, doloribus fuga? Expedita error ad sunt reiciendis sapiente.
        </p>
    </body>
</html>

2. 구체성의 원칙

한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선입니다.

p보다 p.color-red가 구체적이기 때문에 두번째 선택자가 후자임에도 불구하고 첫번째 선택자의 스타일이 적용됩니다.

<head>
    <style>
        p.color-red {
            color: red;
            font-size: 20px;
        }

        p {
            color: green;
        }
    </style>
</head>

<body>
    <p class="color-red">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium, dolor repudiandae tempora consequatur
        maxime animi ad! Quibusdam beatae laudantium itaque eos, cupiditate vero reiciendis assumenda natus
        reprehenderit eveniet at enim?
    </p>
</body>

2.1 가중치

구체성의 원칙은 가중치라는 것을 기준으로 작동합니다. 즉, 어떤 선택자가 더 구체적인가? 를 판단할 때 기중치를 기준으로 판단한다는 의미입니다.
id와 class가 동시에 있을 경우 id> class > 타입 순으로 스타일이 적용됩니다.

<head>
<style>
	h1 {color: red}
	.yellowgreen {color: yellowgreen}
	#fourth {color: skyblue}
</style>
</head>
<body>
	<h1>h1의 첫번째</h1>
	<h1 class='yellowgreen'>h1의 두번째</h1>
	<h1 class='yellowgreen'>h1의 세번째</h1>
	<h1 id='fourth' class='yellowgreen'>h1의 네번째</h1>
</body>

2.2 우선 순위 계산

이름점수
inline-style1000점
id 선택자100점
class, 가상클래스, 속성선택자10점
타입, 가상요소 선택자1점
전체 선택자0점

3. 중요성의 원칙

다른 속성보다 더 우선적으로 적용되어야할 주용한 스타일 속성이 있다면 !important를 속성값 다음에 추가합니다.

  • !important : 절대적인 우선순위. 가중치 점수를 무시하고 무조건적인 우선 순위를 가집니다.


CSS Box Model

1. 박스의 구성

  • content : 요소의 콘텐츠가 표시되는 영역으로 넓이는 width 그리고 높이는 hegiht와 같은 속성을 사용해서 설정할 수 있습니다.
  • padding : 패딩은 콘텐츠와 테두리 사이의 공간입니다.
  • border : 보더 박스는 콘텐츠와 패딩을 둘러싸는 테두리입니다.
  • margin : border 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할을 합니다.

2. 박스의 유형

2.1 블록박스

  • 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채웁니다.
  • 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어냅니다.

2.2 인라인 박스

  • 기본적으로 컨텐츠 박스 만큼의 크기를 가집니다.
  • width와 hegiht 속성을 사용할 수 없습니다.
  • 패딩과 보더 속성을 사용할 수 있지만, 마진 속성은 좌우만 조절할 수 있습니다. 해당 속성들의 상하 값들은 다른 요소들을 밀어내지 않습니다.

3.표준 CSS 박스 모델

3.1 width, height

block 박스인 경우 width, height 값을 통해 content box의 크기를 제어합니다.

3.2 border

보더 박스 영역의 스타일을 지정합니다.

button {
	border-width: 3px;
	border-style: dotted;
	border-color: black;
}

/* 축약형으로 작성하시고 싶다면 */
button {
	border: 3px dotted black;
}

3.2.1 radius

radius속성은 테두리의 꼭짓점을 둥글게 만듭니다.

h1 {
    border: 3px solid #228B22;
    border-radius: 30px;
}

3.3 padding, margin

  • padding
    padding은 패딩 박스 영역의 스타일을 정의합니다.

  • margin
    margin은 마진 박스 영역의 스타일을 정의합니다.
    마진은 요소가 차지하는 전체 너비와 높이에 포함되지 않습니다.

마진 겹침 현상
1. 요소와 요소의 사이에 마진 탑 혹은 마진 바텀의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상

<div class="first"></div>
<div class="second"></div>
div{
  width:100px;
  height:100px;
  border:1px solid black;
}

.first{
   margin-bottom:30px; 
}

.second{
  margin-top:60px;
}
  1. 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상
<div class="parent">
  <div class="child"></div>
</div>
.parent{
  background-color:yellow;
}
.child{
  width:100px;
  height:100px;
  margin-top:50px;
  background-color:red;
}

/* 부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정됩니다.
하지만 위와 같은 경우 자식의 마진 탑, 바텀 값이 부모의 높이에 영향을 미치지 않게 됩니다. */

-> 이러한 현상을 해결하는 방법
1. 부모 요소에 overflow : hidden 적용
2. 부모 요소에 display: inline-block 적용
3. 부모 요소에 border 값을 적용

profile
이예은
노력하는 주니어 FrontEnd 개발자입니다!
이전 포스트

멋사 프론트엔드 스쿨 7일차 (04.05)

0개의 댓글