코딩하는 김딸기

버킷리스트 예제 본문

카테고리 없음

버킷리스트 예제

김딸기* 2024. 8. 2. 16:45

1. 레이아웃 설정

<!DOCTYPE html>
<html>
    <head>
        <title>My Bucket Lists</title>
        <link rel="stylesheet" href="bucketstyle.css">
    </head>
    <body>
       
    </body>
</html>

  

 

2.body내부의 덩어리 레이아웃 분석하고 컨텐츠 삽입

<body>
        <div class="wrapper">
 
            <section class="Bucketlist">
                <header class='Bucketlist-header'>
                    <h1>My Bucket List</h1>
                </header>

                <div class="Bucketlist-contents">
                    <ol class="list">
                        <li>Travel all around the world</li>
                        <li class="is_active">Learn a new language</li>
                        <li>Try a proffession in a different field</li>
                        <li>Achieve your ideal weight</li>
                        <li>Run a marathon</li>
                    </ol>
                </div>
            </section>
 
        </div>
    </body>

 

  • <div class="wrapper">: 모든 콘텐츠를 감싸는 상위 컨테이너 ->큰 한덩어리를 구성
  • <section class="Bucketlist">: 버킷리스트 섹션
    • <header class='Bucketlist-header'>: 버킷리스트 섹션의 헤더
      • <h1>My Bucket List</h1>: "My Bucket List"라는 제목을 표시합니다.
    • <div class="Bucketlist-contents">: 버킷리스트 항목들을 포함하는 콘텐츠 영역
      • <ol class="list">: 정렬된 리스트를 나타내며, class="list"는 스타일링을 위한 클래스입니다.
        • <li>로 리스트 아이템 표현

 

 3. 레이아웃의 스타일 지정

 

wrapper의 레이아웃

/*레이아웃*/
.wrapper{ /*가운데정렬만 담당(레이아웃)*/
    margin:110px auto;
    width: 448px;
   
}

-페이지의 전반적인 레이아웃을 설정

 

 

타이포그래피 지정

:root {
    font-family: 'arial';
}

-기본 폰트를 'arial'로 설정

 

 

body 스타일 지정

body{
    background-color: #D9D9D9;
}

- 웹페이지의 전체 배경색을 설정

 

 

버킷리스트 스타일 지정

.Bucketlist{
    background-color: #eee;
    border-radius: 20px ;/*4각 한번에 20px*/
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.10);/*오른쪽 아래쪽 그림자*/
    overflow: hidden; /*?*/
}

- 모서리 4각을 20px로 둥글게 설정

box-shadow: 0 4px 4px 0 rgba(0,0,0,0.10); -> 버킷리스트 박스의 오른쪽, 아래에 4px의 그림자 효과 

overflow: hidden; ->내용이 넘칠 경우 잘리도록 설정 

 

헤더 스타일 지정

.Bucketlist-header{
    background-color: #FFFFFF;
    padding: 44px 0;/*?*/
    border-bottom: 4px solid #ddd;/*?*/
}

헤더 배경색 설정

padding: 44px 0; ->상하 44px 패딩 (h1이 세로 기준으로 중앙에 오도록)

* 위아래 각 높이는 46px인데 테두리가 총 4px이므로 위아래 높이를 44px로 설정

border-bottom: 4px solid #ddd; ->하단 경계선 테두리를 4px/직선/회색으로 설정

 

 

콘텐츠 스타일 지정

.Bucketlist-contents{
    background-color: #EEEEEE;
    padding: 36px 38px 38px 38px;/*?*/
 

}

 

콘텐츠 배경색 설정

padding: 36px 38px 38px 38px; /* 패딩 */ 

컨텐츠 영역의 내부 문장과 테두리간의 간격은 상화좌우 모두38px이다. 그러나 헤더와 최상단 문장칸 간의 거리는 40px, 헤더의 아래 테두리가 4px이므로 이를 제외한 36px로 지정해야 한다

 

h1 스타일 지정

.Bucketlist-header h1{

    color: #FF007A;
    line-height: 32px;/*?*/
    border-left: 8px solid;/*? 아 왼쪽 테두리를 8px만큼만 만든거*/
    font-weight: bold;
    font-size: 24px;
    padding-left: 30px;/**/

   
}

컨텐츠의 텍스트 색상 설정

border-left: 8px solid; /* 왼쪽에 8px의 굵은 테두리 선 생성 */

font-weight: bold; /* 두꺼운 글꼴 */

font-size: 24px; /* 글꼴 크기 */

padding-left: 31px; /* 좌측 패딩 */  h1과 왼쪽 테두리 간의 너비가 31이므로 

 line-height: 32px; /* 줄 간격 */

텍스트 줄이 상하로 차지하는 공간의 높이가 32px

 

li의 스타일 지정

.list li{
    background-color: #FFFFFF;
    border: 4px solid #D9D9D9;/*테두리*/
    border-radius: 10px ;/*4각이 10px*/
    color: #888888;
    padding: 10px 34px 10px 10px;/*48px맞춰야함*/
    margin-bottom: 14px;
    font-weight: bold;

    line-height: 1.25; /*?*/
   
}
 
.list li:last-child{
    margin-bottom: unset;
}


background-color: #FFFFFF; -> 항목 배경색 설정

border: 4px solid #D9D9D9; -> 항목 테두리를 4px/직선/색깔지정 

border-radius: 10px; /* 각 4각이 모두 10px인 둥근 모서리 */

color: #888888; /* 텍스트 색상 */

font-weight: bold; /* 두꺼운 글꼴 */

 

padding: 10px 34px 10px 10px; /* 패딩 (상, 우, 하, 좌) */ 

각 항목의 패딩은 상단과 하단에 10픽셀, 우측에 34픽셀, 좌측에 10픽셀로 설정되어 있으며, 이는 텍스트와 테두리 사이의 여백을 조절

margin-bottom: 14px; /* 각 li 항목 사이의 간격인 14px로 설정 */ -> 항목 간의 간격은 14픽셀로 설정

line-height: 1.25; /* 줄 간격 */ 줄 간격을 텍스트 크기의 1.25배로 설정하겠다는 의미/ 텍스트의 font-size에 비례해서 줄 간격이 설정됨

 

 

 

.list li:last-child { margin-bottom: unset; }  /* 마지막 항목의 아래쪽 마진 제거 */ 

 마지막 항목만 하단 여백이 없어서 그 아래 요소와 붙어 보이게 됩니다.

 

체크리스트 스타일 지정

.list li.is_active{
    border-color: currentColor;
    color: #759CFF;
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / .1);

    background-image: url(check.png);

    background-repeat: no-repeat;
    background-position: right 10px center;

    background-size: 20px 20px;

}

border-color: currentColor; /* 텍스트 색상과 동일한 테두리 색상 */

color: #759CFF; /* 텍스트 색상 */

box-shadow: 0 4px 4px 0 rgb(0 0 0 / .1); /* 박스의 오른쪽, 아래쪽 그림자설정 */

background-image: url(check.png); /* 배경 이미지 삽입*/

background-repeat: no-repeat; /* 배경 반복 금지 */

background-position: right 10px center; /* 배경 이미지 위치 (우측 10px, 중앙) */

background-size: 20px 20px; /* 배경 이미지 크기 */

 

설정 초기화

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

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

li{
    list-style-type: none;
}

기본적인 브라우저 스타일을 제거

 

셀렉터 특정성 점수

*나중에 지정될수로 selector가 구체적일수록, 우선적으로 스타일이 지정된다

 

 

 

 

 

캐스캐이딩: 아래에서부터 먼저 우선순위가 적용됨