웹디자인기능사) site E유형 배너 공지사항

안녕하세요. 오늘은 웹디자인 기능사 E유형에서 컨텐츠 부분에 배너와 공지사항 하는 법에 대해 알아보도록 하겠습니다.
컨텐츠는 배너/공지사항/갤러리/링크 크게 4가지 카테고리로 분류 할 수 있는데요.
먼저 완성 화면부터 보도록 하겠습니다.

1. 배너

01. 배너 html 구조 잡기

• 사용자가 “예매하기” 링크를 클릭하면 예약 페이지로 이동할 수 있도록 html 코드를 작성해 줍니다.

<article class="banner">
    <h3>기차 여행</h3>
    <a href="#">예매하기</a>
</article>
<!-- //banner -->

02. 배너 css 작업하기

• 배너 섹션을 스타일링하여 텍스트와 버튼이 중앙에 정렬되고, 버튼에는 마우스를 올렸을 때 배경색이 변경되도록 합니다.
• “contents:banner” 주석으로 시작하여 배너 섹션의 스타일을 정의합니다. 각각의 규칙에 대한 자세한 설명은 다음과 같습니다:

/* contents:banner */
#contents .banner {
    width: 100%;
    height: 15%;
    background-image: url(../images/banner.jpg);
    display: flex;
    align-items: center;
    justify-content: center;

}

#contents .banner h2 {
    color: #ffdede;
    margin-right: 10px;
}

#contents .banner a {
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    background-color: #e170c1bf;
    border-radius: 50px;
}

#contents .banner a:hover {
    background-color: #e170c1;
}

001. #contents .banner: ID가 “contents”인 요소 내의 클래스가 “banner”인 요소에 스타일을 적용합니다.

• width: 요소의 너비를 100%로 설정합니다.
• height: 요소의 높이를 15%로 설정합니다.
• background-image: 배경 이미지로 “../images/banner.jpg”를 사용합니다.
• display: Flexbox를 사용하여 내부 요소를 가로로 정렬합니다.
• align-items: 요소 내의 내용을 수직으로 가운데 정렬합니다.
• justify-content: 요소 내의 내용을 수평으로 가운데 정렬합니다.

002. #contents .banner h2: “banner” 클래스 내에 포함된 <h2> 요소에 스타일을 적용합니다.

• color: 텍스트 색상을 #ffdede로 설정합니다.
• margin-right: 오른쪽 마진을 10px로 설정합니다.

003. #contents .banner a: “banner” 클래스 내에 포함된 <a> 요소에 스타일을 적용합니다.

• color: 텍스트 색상을 #fff(흰색)로 설정합니다.
• display: 인라인 블록 요소로 설정하여 여러 링크를 가로로 정렬합니다.
• padding: 내부 여백을 위아래 10px, 좌우 20px로 설정합니다.
• background-color: 배경색을 #e170c1bf로 설정합니다. (알파값 포함하여 rgba 색상 표기법 사용)
• border-radius: 테두리 반경을 50px로 설정하여 둥근 모서리를 생성합니다.

004. #contents .banner a:hover: “banner” 클래스 내에 포함된 <a> 요소에 마우스를 올렸을 때의 스타일을 정의합니다.

• background-color: 배경색을 #e170c1로 변경합니다. (마우스 오버 시 더 진한 색상으로 변경)

2. 공지사항

02. 공지사항 html 구조 잡기

• “notice” 클래스를 가진 공지사항 섹션을 나타내는 HTML 요소입니다. 각 요소에 대한 설명은 다음과 같습니다:

<article class="notice">
    <h3>철길 마을 공지사항</h3>
    <ul>
        <li><a href="#">철길 마을 축제 일정 변경 안내</a><span>2024.05.12</span></li>
        <li><a href="#">철길 마을 도서관 임시 폐쇄 안내</a><span>2024.05.12</span></li>
        <li><a href="#">철길 마을 자원봉사자 모집 공고</a><span>2024.05.12</span></li>
        <li><a href="#">철길 마을 청소 캠페인 안내</a><span>2024.05.12</span></li>
        <li><a href="#">철길 마을 최신 소식</a><span>2024.05.12</span></li>
    </ul>
    <a href="#" class="more">더보기+</a>
</article>
<!-- //notice -->

02. 공지사항 css 작업하기

/* contents .notice */
#contents .notice {
    width: 100%;
    height: 35%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

#contents .notice h2 {
    font-size: 18px;
    background-color: #ab5c5c;
    color: #fff;
    padding: 4px 10px;
    margin-bottom: 10px;
}

#contents .notice ul {}

#contents .notice li {
    position: relative;
    display: flex;
    padding-left: 10px;
    line-height: 1.2;
}

#contents .notice li::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #382020;
    border-radius: 20px;
    position: absolute;
    top: 7px;
    left: 0;
}

#contents .notice li a {
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

#contents .notice li a:hover {
    text-decoration: underline;
}

#contents .notice li span {
    width: 30%;
    text-align: right;
}

#contents .notice .more {
    position: absolute;
    right: 28px;
    top: 27px;
    color: #fff;
}

001. #contents .notice: ID가 “contents”이고 클래스가 “notice”인 요소에 스타일을 적용합니다.

• width: 요소의 너비를 100%로 설정합니다.
• height: 요소의 높이를 35%로 설정합니다.
• padding: 내부 여백을 상하좌우 각각 20px로 설정합니다.
• box-sizing: 박스 크기를 지정한 너비와 높이에 padding과 border를 포함하여 계산합니다.
• overflow: 내용이 넘칠 경우 가려진 부분을 숨깁니다.
• position: 위치를 상대적으로 지정합니다.

002. #contents .notice h2: “notice” 클래스 내에 포함된 <h2> 요소에 스타일을 적용합니다.

• font-size: 글꼴 크기를 18px로 설정합니다.
• background-color: 배경색을 #ab5c5c로 설정합니다.
• color: 텍스트 색상을 #fff(흰색)로 설정합니다.
• padding: 내부 여백을 상하 4px, 좌우 10px로 설정합니다.
• margin-bottom: 하단 마진을 10px로 설정합니다.

003. #contents .notice ul: “notice” 클래스 내에 포함된 <ul> 요소에 스타일을 적용하지 않습니다.

004. #contents .notice li: “notice” 클래스 내에 포함된 <li> 요소에 스타일을 적용합니다.

• position: 위치를 상대적으로 지정합니다.
• display: Flexbox를 사용하여 내부 요소를 가로로 정렬합니다.
• padding-left: 왼쪽 여백을 10px로 설정합니다.
• line-height: 줄 간격을 1.2로 설정합니다.

• #contents .notice li::before: 각 공지사항 항목 앞에 표시되는 작은 점 스타일을 정의합니다.

• content: 가상 요소의 내용을 설정합니다.
• width, height: 크기를 각각 5px로 설정합니다.
• background-color: 배경색을 #382020으로 설정합니다.
• border-radius: 둥근 테두리를 생성합니다.
• position: 위치를 절대적으로 지정합니다.
• top, left: 요소의 위치를 설정합니다.

• #contents .notice li a: “notice” 클래스 내에 포함된 링크에 스타일을 적용합니다.

• width: 너비를 70%로 설정하여 넘치는 텍스트를 가립니다.
• overflow, text-overflow, white-space: 텍스트 오버플로우에 대한 처리를 설정합니다.
• white-space: nowrap: 텍스트 줄 바꿈을 방지합니다.

• #contents .notice li a:hover: 링크에 마우스를 올렸을 때의 스타일을 정의합니다.

• text-decoration: 밑줄을 추가합니다.

005. #contents .notice li span: 각 공지사항 항목의 작성일을 나타내는 <span> 요소에 스타일을 적용합니다.

• width: 너비를 30%로 설정하여 텍스트를 오른쪽에 정렬합니다.
• text-align: 텍스트 정렬을 오른쪽으로 설정합니다.

• #contents .notice .more: “더보기+” 링크에 대한 스타일을 정의합니다.

• position: 위치를 절대적으로 지정합니다.
• right, top: 요소의 위치를 설정합니다.
• color: 텍스트 색상을 #fff(흰색)로 설정합니다.