[CSS] 실습문제

ㅁ 실습문제01_달력만들기 문제

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

하단의 html 요소를 활용하여 style을 적용시켜 사진과 같은 달력모양으로 보여지도록 하시오.

특정 날짜에 마우스를 올리게 되면 해당 날짜의 배경색이 베이지 색상이 되도록 부여하시오.

html 요소에 추가적인 속성을 부여하셔도 됩니다.

</style>

</head>

<body>

2024 <span class="month">8</span> August

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 하단의 html 요소를 활용하여 style을 적용시켜 사진과 같은 달력모양으로 보여지도록 하시오.

특정 날짜에 마우스를 올리게 되면 해당 날짜의 배경색이 베이지 색상이 되도록 부여하시오. */

.date {

text-align: center;

font-weight: 900;

}

.date > .month { /* 그냥 .month 해도 되지만 좀 더 정확하게 */

color: red;

font-size: 40px;

}

.calendar {

border: 1px solid darkgray; /* 이거 필요 없음. 테이블 전체 테두리인듯. */

border-collapse: collapse;

margin: auto;

}

.calendar td {

border: 1px solid darkgray;

width: 100px;

}

.calendar > thead { /* thead는 height 속성을 정확히 적용할 수 있습니다. 좀 더 정확하게 .calendar > 넣음 */

text-align: center;

height: 40px;

font-weight: 900;

}

tbody > tr {

height: 100px; /* tbody 자체의 높이 속성은 표의 기본 레이아웃에 영향을 주지 않습니다. */

font-weight: 900;

vertical-align: top;

/* padding은 tr요소에 적용 x되지 않음. 셀(td, th)에 적용. */

}

tbody > tr td {

padding-left: 8px;

padding-top: 8px;

}

.calendar td:first-of-type { color:red; }

.calendar td:last-of-type { color:blue; }

.calendar .d1 { color: darkgray !important; }

.calendar tbody #zzz1 { color: red; }

.calendar tbody #zzz2 { font-size: 10px; }

.calendar > tbody td:not(.d1):hover{

background-color: beige;

cursor:pointer

} /* td가 tbody의 바로 아래에 있지 않음 */

</style>

</head>

<body>

2024 <span class="month">8</span> August

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

- not도 선택자 중의 하나

:not() 선택자는 특정 요소를 제외한 다른 요소를 선택할 때 유용하게 사용됩니다.

.calendar td:not(.d1) { }

/* .calendar 클래스 안의 td 요소 중, 클래스가 "d1"이 아닌 요소를 선택합니다. */

ㅁ 실습문제02_레이아웃연습1_문제

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

하단의 html 요소들을 가지고

실습문제02_레이아웃연습1_문제.jpg 이미지에 보여지는 형식과 최대한 유사하게 스타일을 부여하시오.

사용할 이미지들은 practice_image 폴더 안에 있습니다.

Tip.

1) header, nav, section, footer 큰 틀 먼저 레이아웃 잡기

2) header 안, section 안에 세부 레이아웃 잡기

3) header 먼저 img 적용해가며 세세한 style 부여하기

4) footer img 적용하여 세세한 style 부여하기

5) section 내에 img 적용해가며 세세한 style 부여하기

section 내에 로그인폼 레이아웃 잡고 세세한 style 부여하기

6) nav 메뉴바 style 부여하기

</style>

</head>

<body>

</div>

</div>

</header>

<ul>

<li><a href="#">Profile</a></li>

<li><a href="#">Board</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

<div>

</div>

<div>

<p>아이들에게 녹색 미래를..</p>

</div>

<div>

</div>

<div>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

</section>

</footer>

</div>

</body>

</html>

- nav가 header 안에 있지 않고 따로 있음.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

하단의 html 요소들을 가지고

실습문제02_레이아웃연습1_문제.jpg 이미지에 보여지는 형식과 최대한 유사하게 스타일을 부여하시오.

사용할 이미지들은 practice_image 폴더 안에 있습니다.

Tip.

1) header, nav, section, footer 큰 틀 먼저 레이아웃 잡기

2) header 안, section 안에 세부 레이아웃 잡기

3) header 먼저 img 적용해가며 세세한 style 부여하기

4) footer img 적용하여 세세한 style 부여하기

5) section 내에 img 적용해가며 세세한 style 부여하기

section 내에 로그인폼 레이아웃 잡고 세세한 style 부여하기

6) nav 메뉴바 style 부여하기

header, nav, section, article, aside, footer , div {

display: block;

/* border: 1px solid gray; */

}

.wrap * { box-sizing: border-box; }

.wrap {

width: 100%;

max-width: 1300px;

margin: auto;

display: flex;

flex-direction: column;

}

.header { height: 150px; }

.nav { height: 40px; }

.content { min-height: 500px; }

.footer { height: 120px;}

/* footer 관련 스타일 */

.footer {

display: flex;

justify-content: center;

align-items: center;

}

.footer > img {

height: 100%;

}

/* header 관련 스타일 */

.header {

display: flex;

justify-content: center;

align-items: center;

}

.header_logo_mini { width: 20%; }

.header_logo_big { width: 60%; }

.header_etc { width: 20%; }

.header_logo_mini {

display: flex; /* 상위 요소에 이 3개를 둬야 하위 요소가 수평, 수직 정렬됨. */

justify-content: center;

align-items: center;

}

.header_logo_big {

display: flex;

justify-content: center;

align-items: center;

}

.header_logo_mini img { flex-basis: 200px; }

.header_logo_big img { flex-basis: 500px; }

/* nav 관련 스타일 */

.nav a { /* 각 글자들에 대해 */

text-decoration: none;

color: white;

font-weight: 900;

}

.nav { background-color: rgb(75, 189, 75); }

.navnav {

/* border: 1px solid red; */

list-style-type: none;

display: flex;

margin: 0;

padding: 0;

width: 100%; /* .navnav의 부모인 .nav에 대한 비율 */

height: 100%;

justify-content: space-evenly;

align-items: center;

}

/* content - side */

.content {

display: flex;

}

.content_side { width: 15%; }

.content_img { width: 60%; }

.content_etc { width: 25%; }

.content_side { display: flex; /* 여기에 이게 있어야 브라우저를 늘이거나 줄여도 높이가 그대로다. */ }

.content_side img {

flex-basis: 2000px; /* 창을 늘렸을 때 빈 공간이 없게끔. width나 flex-basis나 똑같이 동작. */

max-width: 100%; /* 창을 줄였을 때 이미지가 content_side를 뛰어나가지 않게끔. */

padding-top: 10px;

}

/* content - img */

.content_img { display: flex; flex-direction: column; }

.content_img_top {

display: flex; width: 100%; height: 50%;

}

.content_img_bottom {

display: flex; width: 100%; height: 50%;

}

.img1, .img2, .img3, .img4 {

width: 50%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding-top: 30px;

}

.img1 > img, .img2 > img, .img3 > img, .img4 > img { width: 95%; }

.img1 > p, .img2 > p, .img3 > p, .img4 > p { margin-top: 0px; }

/* content - etc */

.content_etc {

display: flex;

flex-direction: column;

}

.content_login { height: 20%; }

.content_poster { height: 55%; }

.content_message { height: 25%; }

.content_login {

display: flex;

flex-direction: column;

}

.login_form { height: 70%; }

.login_etc {

height: 30%;

display: flex;

justify-content: space-evenly;

}

.login_etc > a { text-decoration: none; }

.login_form { display: flex; }

.login_input_wrap { width: 70%; }

.login_btn { width: 30%; }

.login_input_wrap {

display: flex;

flex-direction: column;

padding-top: 10px;

}

.login_input_wrap > input { height: 50%; } /* 둘 다 선택 */

.login_btn > button { width: 70%; height: 70%; }

.login_btn {

display: flex;

justify-content: center;

align-items: center;

}

.content_poster { display: flex;} /* 이건 이미지 파일이 아니고 div다. */

.content_poster > img { /* 이미지파일 태그 image 아니고 img다. */

max-width: 100%;

/* flex-wrap: wrap; 이건 이미지가 삐져나왔을 때 쓰는게 아닌 듯. */

}

.content_message { display: flex; }

.content_message > img { width: 100%; }

</style>

</head>

<body>

</div>

</div>

</header>

<li><a href="#">Profile</a></li>

<li><a href="#">Board</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

</div>

<p>아이들에게 녹색 미래를..</p>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

</section>

</footer>

</div>

</body>

</html>

ㅁ 실습문제03_레이아웃연습2_문제

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

하단의 html 요소들을 가지고

실습문제03_레이아웃연습2_문제.PNG 이미지에 보여지는 형식과 최대한 유사하게 스타일을 부여하시오.

사용할 이미지들은 practice_image 폴더 안에 있습니다.

</style>

</head>

<body>

</div>

</button>

</form>

</div>

</div>

<li><a href="#">교육원소개</a></li>

<li><a href="#">취업지원센터</a></li>

</ul>

</div>

<a href="#">안녕하세요 여기는 공지사항 제목이 들어오는 자리입니다.</a>

</div>

</div>

</div>

</div>

</div>

</form>

<a href="#">아이디</a> |

<a href="#">비밀번호찾기</a> |

</div>

</div>

<a href="#">이용약관</a> |

<a href="#">개인정보취급방침</a> |

<a href="#">인재채용</a> |

</div>

<li>상호명 : GooDee Academy</li>

<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95 (가산동, km타워) 2층, 3층</li>

</ul>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 시멘틱 태그 아님. */

* {

/* border: 1px solid red; */

box-sizing: border-box;

}

.wrap {

width: 100%;

max-width: 1300px;

margin: auto;

display: flex;

flex-direction: column;

}

.header { height: 130px; }

.nav { height: 50px;}

.footer { height: 190px;}

.content { min-height: 400px; }

/* header 관련 스타일 */

.header { display: flex; flex-direction: row; }

.header_logo { width: 25%; }

.header_search { width: 50%; }

.header_ect { width: 25%; }

.header_logo { /* 3개 세트가 여기 있어야 정렬이됨. a에 있음 안되고. */

display: flex;

justify-content: center;

align-items: center;

}

.header_logo img {

width: 200px;

max-width: 100%; /* max 100%를 해줘야 안튀어나감 */

padding-right: 20px;

padding-left: 10px;

}

.search_form {

/* border: 1px solid blue; */

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.search_form > input { /* [1] 검색창 크기랑 버튼 이미지 크기 동일하게 하는법 */

width: 400px;

height: 35px;

}

.search_form img { /* [2] 이미지 작게 하는법 */

width: 50px;

height: 26px;

}

.search_form button { border: 2px solid black; }

.header { border: 1px solid silver; margin: 10px;}

/* nav */

.nav {

display: flex;

justify-content: space-evenly;

align-items: center;

}

.nav > li { list-style-type: none; }

.nav a {

text-decoration: none;

color: darkslateblue;

font-weight: 700; /* 굵기는 뒤에 px 안붙음 */

}

.nav { border: 1px solid silver; margin: 10px;}

/* footer */

.footer {

display: flex;

flex-direction: column;

justify-content: flex-start; /* 메인축 방향. 없어도됨. 어차피 100%를 나눠갖는다. */

/* 이게 center여도 똑같음 어차피 100%라 */

align-items: flex-start; /* 교차축 방향. 없어도됨. */

/* 없어도 되긴 하는데 center면 안 됨. footer_link의 width가 100%아니여서 */

}

.footer_link { height: 25%; }

.footer_info { height: 75%; }

.footer_link { width: 400px } /* 왼쪽에 몰아놓고 space-evenly */

.footer_info { width: 100%; } /* 마지막줄 가운데 정렬 위해 */

.footer_link a {

text-decoration: none;

color: black;

font-weight: 700;

}

.footer_link {

display: flex;

justify-content: space-evenly;

align-items: center;

}

.footer_info {

display: flex;

flex-direction: column;

justify-content: center;

}

.footer_info_copyright {

display: flex;

justify-content: center;

align-items: center; /* 수직정렬이 footer_info가 아니라 여기 있어도 된다. */

}

/* Flexbox 컨테이너의 자식 요소는 반드시 HTML 태그일 필요는 없습니다.

텍스트와 같은 내용도 Flexbox 컨테이너의 자식 요소로 취급됩니다. */

.footer_info_company { list-style-type: '· '; /* 가운데 점(middle dot)*/ }

.footer { border: 1px solid silver; margin: 10px;}

/* content */

.content { display: flex; flex-direction: row; }

.content_left { width: 75%; }

.content_right { width: 25%; }

.content_left {

display: flex;

flex-direction: column;

}

.content_banner { height: 40%; }

.content_notice { height: 15%; }

.content_trend { height: 50%; }

.content_banner img { width: 100%; height:100%; }

.content_banner {

border: 1px solid silver;

margin: 10px;

}

.content_notice {

display: flex;

flex-direction: row;

align-items: center;

}

.content_notice_left { width: 75%; }

.content_notice_right { width: 25%; }

.content_notice_left { padding-left: 15px; }

.content_notice_left a {

text-decoration: none;

color: black;

}

.content_notice_right {

display: flex; flex-direction: row;

justify-content: flex-end; /* align-items, justify-content 자꾸 이상한거 자동완성 조심. */

margin-right: 15px;

}

.content_notice_right a {

text-decoration: none;

color: black;

}

.content_notice_right a + a::before {

/* content: " "; 안됨.

<a> 태그 사이에 공백이 보이지 않는 이유는 HTML에서 연속된 공백 문자들이 무시되기 때문입니다.

HTML은 여러 공백 문자(스페이스, 탭, 줄 바꿈 등)를 단일 공백으로 처리합니다.

따라서 공백을 직접적으로 추가하면 여러 공백이 있는 것처럼 보이지 않기 때문에,

<a> 태그 사이에 공백을 넣으려 할 때 공백이 표시되지 않는 것처럼 보일 수 있습니다.*/

content: " ";

margin-left: 10px; /* 이것만 넣으면 안 됨.

CSS 가상 요소 ::before와 ::after는 content 속성을 지정하지 않으면,

가상 요소는 페이지에서 아무것도 렌더링하지 않습니다.

공백을 추가하려는 경우 content 속성을 통해 빈 문자열(" ")을 삽입하여

시각적으로 공백을 생성할 수 있습니다. 만약 content가 없으면,

::before는 아무것도 표시하지 않기 때문에 margin 속성도 시각적으로 나타나지 않습니다.

}

.content_notice {

border: 1px solid silver;

margin: 10px;

}

.content_trend img { width: 100%; height: 100%; }

.content_trend {

border: 1px solid silver;

margin: 10px;

}

/* content_right */

.content_right { display: flex; flex-direction: column; }

.content_login { height: 30%; }

.content_shopping { height: 70% }

.content_login { display: flex; flex-direction: column; }

.login_form { height: 80%; }

.login_etc { height: 20%; }

/* 정렬이 안될 때 부모요소에 flex선언하고, 자식들 비율도 다 100%로 분배해주기. */

.login_form {

display: flex; flex-direction: row;

justify-content: center;

align-items: center;

}

.login_input_wrap { width: 75%; height: 100%; }

.login_btn { width: 25%; height: 100%; }

.login_input_wrap > input { width: 100%; height: 50%; font-size: 13px; }

.login_btn > button { width: 100%; height: 100%; }

.login_etc {

display: flex; flex-direction: row;

justify-content: center;

align-items: center;

}

.login_etc a {

text-decoration: none;

color: black;

margin-left: 5px;

margin-right: 5px;

}

.content_login {

border: 1px solid silver;

margin: 10px;

}

.content_shopping img { width: 100%; height: 100%; }

.content_shopping {

border: 1px solid silver;

margin: 10px;

}

</style>

</head>

<body>

</div>

</button>

</form>

</div>

</div>

<li><a href="#">교육원소개</a></li>

<li><a href="#">취업지원센터</a></li>

</ul>

</div>

<a href="#">안녕하세요 여기는 공지사항 제목이 들어오는 자리입니다.</a>

</div>

</div>

</div>

</div>

</div>

</form>

<a href="#">아이디</a> |

<a href="#">비밀번호찾기</a> |

</div>

</div>

<a href="#">이용약관</a> |

<a href="#">개인정보취급방침</a> |

<a href="#">인재채용</a> |

</div>

<li>상호명 : GooDee Academy</li>

<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95 (가산동, km타워) 2층, 3층</li>

</ul>

</div>

</body>

</html>

'03. 웹 표준 기술 > CSS' 카테고리의 다른 글

[CSS] 05. Flex 스타일 (0)	2024.08.07
[CSS] 04. 레이아웃 스타일 (0)	2024.08.06
[CSS] 테이블 관련 스타일 (0)	2024.08.06
[CSS] 03. 색상 스타일 (0)	2024.08.06
[CSS] 02. 텍스트 스타일, 04. 레이아웃 스타일 (0)	2024.08.06

공부 블로그

[CSS] 실습문제

'03. 웹 표준 기술 > CSS' 카테고리의 다른 글

티스토리툴바

[CSS] 실습문제

'03. 웹 표준 기술 > CSS' 카테고리의 다른 글

관련글

티스토리툴바