반응형

 

PREVIEW

 

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>My Bucket Lists</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="layout_wrapper">
            <section class="bucketlist">
                <header class="bucketlist-header">
                    <h1>My Bucket list</h1>
                </header>
                <div class="bucketlist-contents">
                    <ol class="list"> <!--오더 리스트 사용-->
                        <li>첫번째</li>
                        <li class="is_active">두번째</li> <!--체크표시 적용위해 클래스 지정-->
                        <li>세번째</li>
                        <li>네번째</li>
                        <li>다섯번째</li>
                    </ol>
                </div>
            </section>
        </div>
    </body>
</html>

 

CSS

 

/* CSS RESET */
body , ol{
    margin: unset;
    padding: unset;
}

li {
    list-style-type: none;
}

h1{
    margin: unset;
    font-size: unset;
    font-weight: unset;
}
 
/*Typograpghy*/
:root{
    font-family: 'Arial';
}

/* Design */
body{
    background-color: #d9d9d9;
}
.layout_wrapper{
    width: 448px;
    margin: 110px auto; /*wrapper 가운데 정렬*/
}

.bucketlist{
    background-color: #eee;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    border-radius: 20px;
    overflow: hidden;/*헤더에 radius 줘도 무방함*/
}

.bucketlist-header{
    background-color: white;
    padding: 44px 0;
    border-bottom: 4px solid#ddd;
   
}

.bucketlist-header h1{
    color: #ff007a;
    font-size: 24px;
    font-weight: bold;
    border-left: 8px solid;
    line-height: 32px;
    padding-left: 30px;
}

.bucketlist-contents{
    /* background-color: bisque; */

    padding: 22px 38px 24px 38px ;
}


/
.list li{
    color: #888;
    background-color: #fff;
    border: 4px solid #d9d9d9;
    padding: 10px 34px 10px 10px;
    line-height: 1.25;
    border-radius: 10px;
    font-weight: bold;
}

.list li:first-child ~ li { /*~은 일반형제 콤비네이터 = 첫번쨰 li이후 나오는 모든 li을 지정*/
    margin-top: 14px;
}

/*다섯번째 방법 flexbox gap*/

/*체크표시 적용*/
.list li.is_active{
    border-color: #759cfe;
    color: #759cfe;
    box-shadow: 0 4px 4px 0 rgba(0 0 0 /0.1);
    background-image: url(./images/check.png); /*마크업이 아닌 배경이미지로 지정*/
    background-repeat: no-repeat;
    background-position: right 10px center;    
    margin: 0 -30px;
}

 

※ 주 속성들은 앞에서 배운내용들을 제외한 나머지 설명

 

■ <ol> tag

목록 태그는 주로 ol, ul 이 두 가지가 있다.

 

<ol> - ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만든다.

<ul> - unordered list의 약자로, 순서가 필요 없는 목록을 만든다.

 

 

<ol>과 <ul>의 각 항목들을 나열할 때는 <li> 태그를 사용하는데 list item의 약자이다

 

목록들의 숫자등 머릿말을 지우려면 앞서 CSS 초기화 부분에서 배웠듯이 

li태그를 list-style-type: none로 적용하면 머릿말이 등장하지 않는다.

 

▶사용 예

 

■ overflow

요소의 콘텐츠가 초과하거나 넘쳐서 요소의 블록 서식 맥락에 맞출 수 없을 때 사용한다.

 

- visible


콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있다

- hidden


콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라낸다.

- scroll


콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라낸다. 콘텐츠 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않는다.


- auto


사용자 에이전트가 결정한다.

콘텐츠가 안쪽 여백 상자에 들어간다면 visible과 동일하게 보이나, 새로운 블록 서식 문맥을 생성한다.

※ buketlist의 overflow:hidden 적용 이유

hidden 은 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라낸다고 하지만 

여기서는 border-radius가 적용될 수 있게 넣은것이다.
자식요소인 buketlist header에 에 배경색 있어서 부모요소 바깥으로 모서리 부분이 튀어나오기 때문이다.

 

■ 콤비네이터

콤비네이터는 셀렉터와 셀렉터 사이에 추가하여 새로운 선택을 만들어내는 연산자이다. 

이를 통해 더 복잡하고 효율적인 선택이 가능해지며, 브라우저는 요소를 선택할 때

셀렉터의 가장 오른쪽 부분부터 시작하여 왼쪽으로 이동하며 조건을 확인한다.

이는 성능 최적화를 위한 것으로, 불필요한 요소 검사를 줄일 수 있다.

콤비네이터를 적절히 활용하면 HTML 구조를 반영한 더 정교한 스타일링이 가능하며,

불필요한 클래스의 사용을 줄일 수 있다.


하지만 복잡한 콤비네이터의 사용은 성능에 영향을 줄 수 있으므로, 가능한 간단하게 유지하는 것이 좋고
너무 깊은 중첩이나 복잡한 관계를 표현하는 콤비네이터는 유지보수를 어렵게 만들고 직관적으로 파악하기 어렵다.
콤비네이터 자체는 셀렉터 특정성 점수에 직접적인 영향을 주지 않지만,

콤비네이터를 많이 이용한다는 것은 많은 셀렉터들을 활용한다는 뜻이므로

셀렉터 특정성 점수가 필연적으로 높아지게 되는 것을 조심해야한다.

 

▼주요 콤비네이터 유형
1. 하위 콤비네이터 (Descendant Combinator)
기호: (공백)
예: div p
설명: 모든 p 요소를 찾은 후, 그 중 div 하위에 있는 요소를 선택

 

2. 자식 콤비네이터 (Child Combinator)

기호: >
예: `ul > li
설명: 모든 li 요소를 찾은 후, 그 중 직계 부모가 ul인 요소를 선택

 

3. 인접 형제 콤비네이터 (Adjacent Sibling Combinator)
기호: +
예: h1 + p
설명: 모든 p 요소를 찾은 후, 그 중 바로 이전 형제 요소가 h1인 것을 선택

 

4. 일반 형제 콤비네이터 (General Sibling Combinator)
기호: ~
예: h1 ~ p
설명: 모든 p 요소를 찾은 후, 그 중 앞에 h1 형제가 있는 것들을 모두 선택

 

예시)

.container div > p + span { color: red; }
- 모든 span 요소 찾기
- 선택된 모든 span요소 중 바로 이전 형제가 p요소 인 것 찾기
- 선택된 span요소의 부모 요소가 div요소 인것을 찾기
- 최종적으로 선택된 span요소가 .container 클래스를 가진 요소의 하위에 있는지 확인 후
   span의 색상 빨강으로 지정

 

▼ bucketlist li 사이간격 콤비네이터 활용 4가지

    공통 적용 스타일

.lists li {
    color: #888;
    background-color: white;
    border: 4px solid #D9D9D9;
    padding: 10px 34px 10px 10px;
    line-height: 1.25;
    border-radius: 10px;
    font-weight: bold;
}
/*첫번째*/
.list li:last-child{  /*리스트의 마지막번째 선택 : 가상클래스 사용*/
    margin-bottom: unset; /*하단 마진 사이간격 설정하기위해*/

 

/*두번째*/
.list li + li { /*인접형제콤비네이터 - 즉 첫번째 빼고 다 선택됨 li 다음에 나오는 li만*/
    margin-top: 14px;
}

 

/*세번째*/
.list li:not(:first-child){     /*firstchild가아닌 li를 선택
    margin-top: 14px;
}

 

/* 네번째*/
.lists li:first-child ~ li { /* 일반형제 콤비네이터 = 첫번쨰 li이후 나오는 모든 li을 지정*/
    margin -top: 14px;
}

 

 flexbox , gap 사용하는 방법 도 있다. 방법은 차후 수업에 진행

■ background-position

 background-image 를 설정할 때, 해당 이미지의 위치값을 설정하는데 사용된다.

 

▼ 주요 속성

background-position 속성은 배경 이미지의 위치를 설정

background-position-x 속성은 배경 이미지의 x축 위치를 설정
background-position-y 속성은 배경 이미지의 y축 위치를 설정

 

예시)

background-position : left;     /* 키워드 설정 */
background-position : center;   /* 키워드 설정 */
background-position : right;    /* 키워드 설정 */
background-position : bottom;   /* 키워드 설정 */
background-position : top;      /* 키워드 설정 */
background-position : px;     /* 단위 설정 */
background-position : %;      /* 퍼센트 설정 */

background-position : left top;                 /* X축 | Y축 */
background-position : px px;               /* X축 | Y축 */
background-position : right px top px;      /* X축 + px | Y축 + px */
background-position : top % right em;       /* X축 + % | Y축 + em */
background-position : right top px;           /* X축 | Y축 + px */
background-position : top px right;            /* X축 + px | Y축 */

 

 

PRWVIEW

각요소에 hover 적용

 

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>CITRUS</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <header class="header">
                <!--가로로 배치되어있는걸보면 block이아닌 inline요소이다. 즉 a요소는 inline임-->
                <a href="" class="icon logo">citrus jam</a> <!--다중클래스 사용-->
                <a href="" class="icon lemon">lemon</a>
                <a href="" class="icon orange">orange</a>
                <a href="" class="icon jamong">jamong</a>
            </header>
            <main class="contents">
                <h1>Citrus <span>Jam</span></h1> <!--jam 텍스트를 부분적으로 적용하기위해 인라인레벨요소인 span사용-->
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Tenetur explicabo officia nobis corrupti quidem aliquam, nam aspernatur, a nesciunt quae eos tempore
                laborum iste deleniti sit, libero minima quis odit?</p>
            </main>
        </div>
    </body>
</html>

 

CSS
/*초기화*/
body, p{ /*마진병합되어있는거보고 초기화*/
    margin: unset;
}

h1{/*마진병합되어있는거보고 초기화*/
    margin: unset;
    font-size: inherit;
    font-weight: unset;
}

a{
    color: unset;
    text-decoration: unset;
}

/*레이아웃*/
.wrapper{
    /* box-shadow: inset 0 0 20px red; */
    width: 960px;
    margin: 60px auto;
}

/*디자인*/

body{
    background-image: url(./images/bg.png);
}

.header {
    /* box-shadow: inset 0 0 20px blue; */
    padding: 60px 0;
}

.header .icon {
    background-color: black;
    text-decoration: none;
    border-radius: 50%;
    margin: 10px;
    width: 200px;
    height: 200px;
    /*display:inline에는 width와 heigh의 개념이 없기에 적용되지 않는다.*/
    display: inline-block; /* block의 특성을 inline 속성을 가지게 끔 함. 하이브리드 속성이라고보면됨*/
    color: white;
    text-align: center;
    line-height: 13; /*줄 높이를 조절*/
}

.logo {
    background-image: url(./images/logo.png);
    text-indent: -9999px;
}

.header .icon:hover {
    text-indent: -9999px;
}

.header .icon.lemon { /*셀렉터가 .header .icon에있는 white가 이기기떄문에 반대로 적용하려면 선택기 특이성을 이기게끔 바꿈*/
    color: yellow;
}
.header .icon.lemon:hover {
    background-image: url(./images/lemon.png);
}


.header .icon.orange{
    color:orange;
}
.header .icon.orange:hover {
    background-image: url(./images/orange.png);
}

.header .icon.jamong {
    color:red;
}
.header .icon.jamong:hover {
    background-image: url(./images/jamong.png);
}


.contents{
    /* box-shadow: inset 0 0 20px green; */
    background-color: white;
    border-radius: 60px;
    padding: 60px;
}

/* .contents p {
    white-space: pre; 코드의 모든 서식들이 적용됨 엔터키눌러서 줄넘김같은거 <br>느낌
} */

.contents h1 {
    font-size: 40px;
    font-weight: bold;
    color: orangered;
    margin-bottom: 20px;
}

.contents h1 span {
    font-size: 0.5em; /*em단위는 px와 연동된다*/
}

.contents p {
    font-size:10px;
}

.footer {
    box-shadow: inset 0 0 20px yellow;
}


 

■ 마진병합 ( margin collapsing)

마진 병합은 인접한 블록 레벨 요소의 수직 마진을 합쳐 더 큰 마진 하나만 적용하는 CSS 규칙이다.

이 규칙은 요소 간의 중복된 공간을 제거하여 레이아웃을 최적화 하고 시각적인 안정성을 제공한다.

요소간의 간격이 자연스럽게 생성될 수 있도록 의도된 동작이다.

 

▼ 마진병합 발생 조건

   - 블록 레벨 요소간에 발생(부모,자식,형제 요소 모두포함)

   - 상하단 마진만 병합

     

▼마진병합 발행 해결법 (summary)

   부모와 자식간의 마진병합을 해결하기위해 보더나 패딩주는것보다 부모에게 지정하는 overflow나 flow-root사용한다.
   자식요소의 마진도 품어버리는 새로운 문서의 시작을 만들어냄 block formatting context (bfc) (밑에서 자세히 설명)

 
   1. overflow: scroll,hidden;하위요소가 넘쳤을때 스크롤을 만듬 ,스크롤숨기고싶을떄 hidden
   2. display :flow-root는 새로운 블록 서식 맥락을 생성하는 블록 레벨 박스를 생성하여 서식 루트를 정의한다.

마진병합 발생 시 overflow:hidden 대안으로 나온게  flow-root 이지만 생긴지 얼마안돼서, 안정성이 떨어진다고하여

그냥 다시 hidden 쓰는 방향으로 흘러간다고 한다 (밑에서 자세히 한번더 설명)

 

▼마진 병합 현상 (형제)

margin-bottom 40px

 

margin-top:20px

 

검사를 통해 각 요소에 마우스hover 해보면 이미지와 같이 마진이 병합되어있는 것을 볼 수있는데 자세히 말하자면

 

.child.a의 margin-bottom: 40px과 .child.b의 margin-top: 20px이 만나, 값이 누적되면서 

총 60px의 요소간 간격이 형성 될것이라 생각할 수 있다.

하지만 실제 동작은 마진 병합의 규칙에 의해 해당 요소간 사이 마진은 40px이다.
이는 의도된 동작이며 .child를 인라인 레벨 요소로 변경하여

마진 병합의 조건에 들어가지 않게 조작 한다.

 

 

▼ 마진 병합 현상 (부모와 자식)

마진 병합이 일어나는 조건에 의해, 부모 요소와 첫 번째 또는 마지막 자식 요소 간에도 마진 병합이 발생할 수 있다.

 

margin-top: 60px;  margin-bottom: 60px;

 

.child.a의 상단 마진과 부모 요소인 .parent의 상단 마진이 병합되어, 

큰 쪽의 마진인 60px로 적용 됨을 확인 할 수 있다.

조건에 의해 마진 병합 규칙대로 동작이 된 것이지만, 해당 결과는 부자연스럽게 느껴진다.
부모와 자식간의 마진 병합 현상은 해결 해야하는 문제이다.

 

▼마진병합 발행 해결법 (expansion)

 

1. 부모 요소 또는 자식 요소중 어느 하나라도 블록 레벨 요소가 아니라면 마진 병합 현상은 발생되지 않는다

 

2. 부모 요소에게 border, padding등의 실제 공간을 차지하는 경계면을 만들어 낸다면

     부모 요소와 자식 요소가 해당 경계면을 기준으로 명확히 구분되게 된다.

     즉, 부모와 자식간 마진 병합 현상은 발생되지 않는다.

 

3. 부모 요소와 자식 요소 사이에 table요소를 넣어 마진 병합이 일어나지 않게 방해한다(오래된방식이며 사용X)

    table요소는 내부에 아무런 콘텐츠를 넣지 않아도 활성화 되기 때문에 마진 병합을 방해하는 트릭으로 쓰인다.

    보통 실제 table요소를 HTML상에 직접 작성하지는 않고 아래와 같은 기법을 활용한다.
    부모에게 적용하는 가상 요소중 콘텐츠를 생성할 수 있는 ::before, ::after를 이용하여

    부모 요소의 시작과 끝에 빈 table요소를 넣는다.

    테이블 요소는 일반적인 블록 레벨 요소와는 독립적인 박스 모델을 가지며

    table요소는 자체적인 레이아웃 알고리즘을 사용하며, 마진 병합을 방해하는 용도로 쓰인 케이스이다.

 

4.블록 포멧팅 컨텍스트 사용 (used of block formatting context (bfc))

부모 요소에 display: flow-root를 적용하여 마진 병합 문제를 해결 할 수 있다.

display: flow-root도 블록 레벨 요소라고 볼 수 있지만, 새로운 블록 포맷팅 컨텍스트를 만들어 낸다는 차이가 있다.
자식 요소의 마진을 부모 요소의 내부로 온전히 포함하는 요소를 만드는 개념이며

부모와 자식간 마진 병합을 의도적으로 해결해야한다면 가장 추천 하는 방법이다.

또한 블록 포맷팅 컨텍스트는 다른 방법으로도 생성 할 수 있다.

대표적인 방법으로 부모 요소에게 overflow: hidden을 지정하는 것이다.

overflow를 초기값 visible이 아닌 값으로 설정하게 되면, 부모 요소의 바깥과 부모 요소의 내부를

확실히 격리 시키는 개념으로 만들어지게 된다. 이 방법으로도 마진 병합 현상이 해결 되지만,

overflow: hidden의 원래 용도인, 넘처 흐른 자식 콘텐츠를 잘라내는 효과가 나올 수 있어 주의가 필요하다.

▶블록 포멧팅 컨텐스트란?

Block Formatting Context
다른 이름: 블록 서식 맥락, BFC
블록 포맷팅 컨텍스트가 부여된 요소는 "새로운 문서로 새로 시작"하는 느낌을 주며,
내부와 외부의 영향을 격리시켜 요소들이 독립적으로 배치되도록 한다
이를 통해 블록 포맷팅 컨텍스트는 플로트 요소의 처리, 마진 병합 해결 등
다양한 레이아웃 문제를 효과적으로 해결한다.
블록 포맷팅 컨텍스트의 생성 조건블록 포맷팅 컨텍스트는 다음과 같은 조건을 만족할 때 생성된다.

○ 문서의 root 요소 (<html>)
○ float 요소 (float 속성이 none이 아닌 요소)
○ 절대 위치 요소 (position 속성이 absolute 또는 fixed인 요소)
○ 인라인 블록 요소 (display: inline-block)
○ 테이블 셀 (display: table-cell)
○ 테이블 캡션 (display: table-caption)
○ 오버플로우 값이 visible이 아닌 요소 (overflow 속성이 hidden, scroll, auto)
○ display: flow-root 요소
○ 플렉스 아이템 (플렉스 컨테이너의 직계 자식)
○ 그리드 아이템 (그리드 컨테이너의 직계 자식)
※ 해당 개념은, 부모와 자식 관계에서의 마진 병합 문제를 해결하는데 유용하게 활용 된다.

 

■ 네거티브 마진과 마진 병합

      네거티브 마진은 마진 병합 현상과 결합될 때 두 가지 주요 효과를 동시에 일으킨다.

  • 네거티브 마진이 적용된 요소의 공간 축소
  • 마진병합 규칙에 의해 큰 쪽의 마진 하나가 요소간 간격으로 적용됨

▶ 네거티브 마진 (negative margins)

    마이너스 마진, 음수값 마진이라고도 불리며 요소의 레이아웃을 더 유연하게 조정할 수 있다.

양수값 마진은 단순히 '여백을 추가한다'는 것 이상의 의미를 가진다.

왼쪽 마진값을 50px을 부여하여 시작적표현은 그대로 유지된 상태로 오른쪽으로 50px 이동하였다

하지만 이는 박스 요소의 위치가 이동된 것이아닌 요소의 왼쪽 기준에서 실제 차지하는 공간 50px이 추가됨으로써

박스 요소가 차지하고있는 전체 공간의 크기가 커졌다는 것을 알 수있다.

 

즉 박스요소의 시각적인 표현은 그대로이지만 실제 차지하고있는 공간에 변화가 생겨

시각적인 표현이 마치 이동된 것처럼 보이는 것이다

 

이제 왼쪽 마진 값을 0으로 바꿔보고 음수값 마진(네거티브 마진)을 적용해본다.

좌- 왼쪽 마진값 0 우 - 왼쪽 마진값 -50px

 

왼쪽 기준에서 50px 만큼 공간 제거가 발생하였다.

즉 브라우저에서 해당요소의 너비를 지정된 200px가아닌 150px로 출력된다.

 

정리하자면 네거티브 마진은 요소가 차지하는 실제 공간을 축소시키며 요소의 원래위치는 변하지않는다.

※ 참고사항

▼ 컨테이너의 크기가 재계산되는 맥락
만약 다음과 같은 상황이라면 margin속성 이용의 결과가 시각적인 표현에 영향을 줄 수 있다.

블록 레벨 요소 상황에서 width: auto일때
플렉스 아이템의 높이가 플렉스 컨테이너의 높이 기준으로 stretch된 상황일 때
position: absolute, 또는 fixed이고 inset: 0일때

위 상황은 컨테이너의 너비 또는 높이가, 설정된 margin속성값을 고려하여
재계산 되는 상황이라고 볼 수 있다.. 설정된 margin값만큼 자신의 너비 또는 높이를 재계산 한다.
양수값 마진을 설정 하였을때, 해당 마진값 만큼 시각적 표현이 작아지게 되고,
음수값 마진을 설정 하였을때에는 반대로 시각적 표현이 확장되는 결과를 가지고 온다
해당 요소가 실제 차지하고 있는 공간의 크기는 언제나 컨테이닝 블록의 크기로 고정된다.

 

 

■ text-indent

text-indent는 들여쓰기와 내어쓰기를 설정한다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 된다. 

내어쓰기를 할 때는 왼쪽에 여백을 적절히 준다.

 

첫번째 문단은 들여쓰기 2em, 두번째 문단은 내어쓰기 음수값을 지정, 세번째 문단은 내어쓰기-2em 음수값을 주고 왼쪽에 여백을 준것

 

로고에 text-indent 음수값을 주어 내어쓰기를 한이유는 약간 가라방식으로 텍스트를 치워준것이다.

해당 방법으로 텍스트를 숨겨버린건 옳지않은 방법이다....

 

■ hover

CSS에서의 hover는 마우스를 요소에 올렸을때 발생하는 효과를 스타일로 정의하여 만들어낸다.

    <style>
        body{
            background-color: darkgray;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orangered;
            margin-left: 0px;
}
        .box:hover{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">test</div>
</body>

 

스타일 적용하고자하는 요소 옆에 :hover 를 작성하고 

hover 작동 시 요소 배경 색상 변경되게 적용함

 

hover 적용 방법은 간단하지만 이후 자바스크립트에 다양한 방법으로 적용된다. 원리만 간단히 이해하자.

 

 

 

 

PRWVIEW

HTML
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>Pokemon</title>
    </head>
    <body>

        <div class="pokemon">
            <img src="images/pikachu.png">
            <h1>Pikachu</h1>
            <p>Pikachu ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient</p>
            <div class="icons">
                <a class="twitter" href="">Twitter</a>
                <a class="facebook" href="">Facebook</a>
                <a class="pinterest" href="">Pinterest</a>
            </div>
        </div>

    </body>
</html>

 

CSS
h1, p {
    margin: 0;
    padding: 0;
}
body {
    background-color: #ddd;
}

.pokemon {
    border-radius: 5px;
    background-color: white;
    width: 300px;
    text-align: center;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    margin: 250px auto 0;
}

.pokemon img {
    margin-top: -200px; /*네거티브 마진*/
}


.pokemon h1 {
    color: orange;
    /* border-bottom: 5px solid orange; */
    width: 120px;
    margin: 0 auto 20px;
}
/*h1 컨텐츠 이전의*/
/* .pokemon h1::before {
    content: 'wow';
} */

/*h1 컨텐츠 이후의*/
.pokemon h1::after {
    content: ' ';
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto;
    border-radius: 4px;
    background-color: orange;
}
.pokemon p {
    padding: 20px 20px 40px;
}

.icons {
    background-color: #eee;
    padding: 20px 0;
}

.icons a {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-image: url(images/icon-sprite.png);
}

.icons a.twitter   { background-position: left top;  }
.icons a.facebook  { background-position: center top;  }
.icons a.pinterest { background-position: right top;  }

.icons a:hover {
    background-position-y: bottom;
}

 

■ 가상 요소 셀렉터 (pseudo element selector)

실제 HTML 요소가 아니라 CSS를 통해 선택되거나 생성되는 '진짜인척 하는 가짜 요소'임을 뜻한다.

실제 HTML 문서 트리에 존재하지 않는다.

실제 존재하고 있는 특정 HTML 요소 자체를 선택하는 가상 클래스 셀렉터와는 목적성이 다르다.
가상 요소는 :: 콜론 두개로 시작 한다.

 

추가로 설명하자면 가상요소 : 가 한 개 일때 단일콜론(:) 이라고 하며 

문서의특정 부분을 선택하며 해당 부분의 상태나 위치등에 따라 스타일을 적용한다.

가상요소 :: 가 두 개 일때 이중콜론(::) 이라고 하며

문서의 특정 부분이 아니라 문서의 일부를 생성하거나 선택하는데 사용한다.

 

 

▷ 선택(select)의 용도로 활용
마크업을 변경하지 않고도 문서의 특정 부분만을 선택하여 스타일을 적용할 수 있다 

 

▷ 주요 가상 요소
::first-line : 텍스트의 첫 번째 줄을 선택
::first-letter : 텍스트 블록의 첫 번째 글자를 선택
::selection : 사용자가 커서로 선택한 문서의 부분을 나타냄
적용 가능한 CSS 속성에 제한이 있는 경우가 많다. 일반적인 방법으로 선택하기 어려운 부분도 

이 가상 요소로 선택할 수 있는 방법을 제공해주어 스타일을 수정 할 수 있게 도움을 주는 경우가 존재한다.


▷ 생성의 용도로 활용
마크업을 변경하지 않고도 문서의 특정 부분에 새로운 요소를 생성 할 수 있다. 

::before, ::after 두가지 가상 요소로 활용한다.

 

▼ ::before 

       내부 컨텐츠 이전에 새로운 가상 요소를 추가할 수 있다.

wow 요소의 첫 자식으로 생성

 

 

▼ ::after 

       내부 컨텐츠 이후에 새로운 가상 요소를 추가할 수 있다.

wow.요소의 마지막 자식으로 생성

 

▼ ::before, ::after 둘다 적용

즉 BEFORE ❘ CONTENTS ❘ AFTER 이 완성된다.

 

▼ 만들어진 가상 요소 주의 할점
    ○ 실제 HTML 구조에 존재하지 않는 요소임으로 자바스크립트를 통한 직접 접근이 불가능
    ○  img, input등 내부에 하위 요소를 넣을 수 없는 빈 요소에는 적용 불가

    ○  생성된 가상 요소는 최초 display: inline 상태이다.

    ○  가상 요소로 생성된 콘텐츠는 대부분의 검색 엔진에 의해 직접적으로 인덱싱되지 않는다.

        즉, 검색엔진이 인식해야 하는 중요한 텍스트 콘텐츠는 HTML에 직접 포함시키는 것이 좋다.

 

▼ 생성되는 가상 요소 ::before, ::after의 사례
    ○  인용 부호 추가: 텍스트 콘텐츠에 시각적 강조를 준다
    ○  툴팁 만들기: 추가 정보를 제공하는 인터랙티브 요소를 만든다
    ○  아이콘 추가: 텍스트에 작은 아이콘을 쉽게 추가할 수 있다.
    ○  카운터 사용: 자동 번호 매기기 기능을 구현한다.
    ○  장식적 요소 추가: 불필요한 마크업을 늘리지 않고 시각적 장식을 더한다.

 

▷ 결론

   이러한 기법들은 HTML 구조를 변경하지 않고도 다양한 시각적, 기능적 요소를 추가할 수 있게 해준다. 

   이는 코드의 유지보수성을 높이고, 디자인과 기능을 분리하는 데 도움이 된다.

   또한, 이러한 방식으로 추가된 요소들은 대부분 순수하게 장식적이거나 부가적인 정보를 제공하므로,

   접근성이나 검색엔진 최적화에 부정적인 영향을 주지 않는다.

   마크업 구조가 깔끔하게 유지됨으로 유지보수성도 높아진다.

   시멘틱한 마크업 구조로 발전 시키기 위해 꼭 필요한 기법이다.

 

 

PREVIEW

 

미디어 쿼리의 반응형

 

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>TIMELINE</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  </head>
  <body>

    <div class="l_wrapper">
      <section class="timeline">
        <header class="timeline-header">
          <h1>
            CSS<br>
            TIMELINE
          </h1>
        </header>
        <main class="timeline-contents">
          <ol class="timeline-list">
            <li>
              <div class="year">
                <h2 class="years">2004</h2>
                <p class="contents">Completely synergize resource relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
                <div class="button">READ MORE</div>
              </div>
            </li>
            <li>
              <div class="year">
                <h2 class="years">2010</h2>
                <p class="contents">Completely synergize resource relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
                <div class="button">READ MORE</div>
              </div>
            </li>
            <li>
              <div class="year">
                <h2 class="years">2018</h2>
                <p class="contents">Completely synergize resource relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
                <div class="button">READ MORE</div>
              </div>
            </li>
            <li>
              <div class="year">
                <h2 class="years">2021</h2>
                <p class="contents">Completely synergize resource relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
                <div class="button">READ MORE</div>
              </div>
            </li>
          </ol>
        </main>
      </section>
    </div>

  </body>
</html>

 

CSS
/* Resets */
body, ol {
  margin: unset;
  padding: unset;
}

li {
  list-style-type: none;
}

h1 ,h2{
  margin: unset;
  font-size: unset;
  font-weight: unset;
}

/* Typography */
:root {
  font-family: "Montserrat", sans-serif;
}

/* Layouts */
.l_wrapper {

  /* max-width: 1200px -> 최대 사이즈를 1200px로 제한 */
  /* 즉 작아질 수 는 있다. */
  max-width: 1200px;
  width: auto;/*  가득 차려고 노력 */

  margin: 0 auto;
  padding: 0 40px;
}

/*컴포넌트*/

body {
  background-color: dodgerblue;
}

.timeline {
  background-color: rgb( 255 255 255 / .4 );
}

.timeline-header {
}

.timeline-header h1 {
  text-align: center;
  padding: 60px 0;
  font-size: 60px;
  color: white;
  font-weight: 800;
}

.timeline-contents {
  padding-bottom: 240px;
  overflow: hidden;
}

/*timeline의 전반적인 레이아웃 담당*/

.timeline-list {
  /* box-shadow: inset 0 0 20px black; */
  margin: 0 -20px; /*양옆이랑 timeline-contents랑 간격을 맞추기위해 지정 */
  display: flow-root;
}

.timeline-list li {
  /* width: calc(50% - 80px); box-sizing 사용하지않고 50%유지 calc()사용*/

  width: 50%; /*auto는 부모요소의 컨텐츠 영역의 넓이 만큼 지정하므로 절반만 채울경우 50%*/
  padding: 0 20px; /*넓이 50% 적용이안되서 boxsizing씀*/
  box-sizing: border-box; /* 패딩값을 넣으면 넓이 50%가 초과되게 보인다 그걸 방지 box-sizing 사용 */
  margin-bottom: -140px;
}

.timeline-list li:nth-child(even) { /*홀수:odd, 짝수 even 또는 숫자(n)*/
  margin-left: auto;
}

.timeline-list li:last-child {
  margin-bottom: 0;
}
/*실제 눈에 보이는 컴포넌트 (마진을 왠만하면 주지않는것이 베스트 : 독립성)*/
.year { /*card*/
  background-color: white;
  width: auto;
  padding: 40px;
  min-height: 300px;
  border-radius: 40px;
 
}

.years{ /*h2*/
  color: dodgerblue;
  font-weight: 600;
  font-size: 50px;
 
}

.contents{
  min-height: 300px;
  line-height: 30px;
 
}

.button{
  display: inline-block;
  border: 2px solid dodgerblue;
  border-radius: 10px;
  padding: 10px;
 
}

.timeline-list li:nth-child(even) { /*li의 짝수 선택*/
  .year { /*li의 짝수의 카드들만 선택*/
    text-align: right;
  }
}

/*미디어쿼리 // 셀렉터 특정성 점수 이유 연습*/
@media (max-width:960px) { /*960px보다 작아졌을때*/
  .timeline-header h1{
    font-size: 40px; /*h1의 폰트 사이즈는 60px에서 40px로 축소됨*/
    padding: 30px 0;
  }
 
  .timeline-list li {
    width: unset; /**/
    margin: 0 0 40px 0; /*네거티브 마진을 줘서 합쳐졌기에 마진을 줘서 늘린다*/
  }
}

 

 

■ box-sizing:border-box

box-sizing속성은 CSS에서 요소의 너비와 높이를 계산하는 방법을 제어하는 속성이다.
기본적으로 요소의 너비와 높이는 콘텐츠의 크기에 padding과 border를 더한 값을 기준으로 계산되지만, 

box-sizing 속성을 사용하면 이 계산 방법을 변경할 수 있디.

▼content-box (초기값): 

    요소의 너비와 높이가 콘텐츠만을 포함한다. padding과 border는 너비와 높이에 포함되지 않는 특징이있다.

전체 with 값 =  '300(콘텐츠 크기) + 60(좌우 padding 값) + 60(좌우 border 값) + 60(좌우 margin 값) =480px

 box-sizing 값을 content-box로 설정해줘도 다를 바가 없다.

 box-sizing의 기본값은 content-box이기 때문에 따로 설정하지 않아도 content-box가 적용된 상태였던 것이다.


▼ border-box

     요소의 너비와 높이가 콘텐츠, padding, border를 모두 포함한다.

전체 with 값 =  '180(콘텐츠 크기) + 60(좌우 padding 값) + 60(좌우 border 값) = 300px

box-sizing 값을 border-box로 설정해보았다. 확인해보면 설정한 width 값인 300px에 맞춰서

콘텐츠의 크기를 180px로 알아서 축소시켰음을 알 수 있다.

즉 border-box로 설정하면 요소의 width 값은 '콘텐츠 크기 + 좌우 padding 값 + 좌우 border 값'으로 계산되는 것이다. 

결국 요소의 크기를 width 값과 동일하게 설정하기위해선 box-sizing 값을 border-box로 설정한다.

 

■ CSS 선택자 nth-child

요소의 기본값 지정

    ▼:nth-child(N)= 부모안에 모든 요소 중 N번째 요소

        주요속성: (n),(2n),(n+n),(odd),(even)

첫번째 선택
두번쨰 마다 선택
첫번째 요소부터 2번째 마다 선택


    ▼ A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소

부모안에 요소 중 첫번째 p요소 선택


    ▼ :first-child= 부모안에 모든 요소 중 첫번째 요소


    ▼ :last-child= 부모안에 모든 요소 중 마지막 요소


    ▼ A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소

부모안에 모든 p요소 중 첫번째 p요소 선택


    ▼ A:last-of-type= 부모안에 A라는 요소 중 마지막 요소

부모안에 모든 div요소 중 마지막 div요소 선택

 

■ 미디어(@media) 쿼리

반응형 웹디자인의 기본이되는 미디어 쿼리는 뷰포트(viewport) 너비에 따라 유연하게 컨텐츠를 배치하는 기술이다.

▼기본 문법

 

 

 

 

▼ max-width (최대 너비 부터 적용)

화면이 960보다 작아졌을떄

 

우리가 위에서 작업한 timeline 기준으로 미디어쿼리를 작성해보겠다.

화면이 960px보다 작아질경우 폰트크기와 패딩을 새롭게 적용하여 보기 편하게 만들어본다.

크기를 961에서 960아래인 959로 내리자마자 화면이 보기좋게 바뀌었다.

.

 

▼ min-width (최소  너비 부터 적용)

화면 크기가 1024px 만큼 줄었을때 이 부분 이 크기로 줄어들지 않게 적용하는 것

주로 데스크탑,테블릿 반응형에 사용한다.

 

쉽게말해서 min-width같은 경우 브라우저 크기가 작아지면 박스의 크기가 1024px밑으로 줄어들지 않고  

max-width는 960px이상으로 늘어나지 않는다.

 

이를 이용하여 다양한 디바이스를 반응형 웹 작업을 통해 다양한 레이아웃을 구성할수있게 만듦으로써

사용자를 편리하게 하는것이 이 미디어쿼리 이다

 

반응형

'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.07.31~ (Day5) - HTML/CSS  (0) 2024.08.09
2024.07.26 ~ 28 수업  (0) 2024.08.07
2024.07.24 / 25 수업  (0) 2024.07.31

티스토리툴바