Dev log - 4, CSS 기초 #2

학습한 내용

CSS 가상 선택자

  • 선택한 요소에 행동과 규칙에 의해서 디자인을 적용하는 방식
  • a 태그에서는 link 로 기본 색상 변경, active 로 클릭 된 색상 변경, hover 로 커서 활성화 상태 색상 변경

HTML 문서

<body>
	<a href="https://www.naver.com">네이버</a>
</body>

CSS 문서

a:link {
	color: red;
}

a:active {
	color: blue;
}

a:hover {
	color: pink;
}

  • input 태그에서는 focus 로 글 활성화 상태 테두리 변경

HTML 문서

<body>
	<input type="text">
</body>

CSS 문서

input:focus {
	border:  solid 10px red;
}

  • first-child 로 첫번째 태그 변경, last-child 로 마지막 태그 변경
  • nth-child(n) 로 n번째 태그 변경,
    홀수 변경은 nth-child(2n-1) 짝수 변경은 nth-child(2n)

HTML 문서

<body>
	<ul>
		<li>메뉴1</li>
		<li>메뉴2</li>
		<li>메뉴3</li>
		<li>메뉴4</li>
		<li>메뉴5</li>
		<li>메뉴6</li>
	</ul>
</body>

CSS 문서

li:first-child {
	color: red;
}

li:last-child {
	color: blue;
}

li:nth-child(2) {
	color: gray;
}

  • 글자와 태그 사이 디자인은 before,
    글자와 닫힌 태그 사이 디자인은 after

HTML 문서

<body>
	<ul>
		<li>로그인</li>
		<li>회원가입</li>
		<li>회사소개</li>
		<li>고객센터</li>
	</ul>
</body>

CSS 문서

li:before {
	content: "***";
}

li:after {
	content: "---";
}

프로젝트 폴더 설정

  • 웹페이지에는 많은 이미지 등이 들어가기 때문에, 파일들을 폴더로 구분해야함
  • CSS 문서는 index.html 파일을 기준으로, 경로를 폴더명/파일명.확장자 로 지정

HTML 문서

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h1>Hello World</h1>
</body>

CSS 문서

h1 {
	color: red;
}

  • 이미지 파일을 CSS 문서에서 넣을 때는, 경로가 CSS 폴더 기준에서 시작되기 때문에, ../라는 경로를 넣어야 폴더 밖으로 나와짐
  • img 태그를 쓸 때는 그대로 index.html 파일 기준

HTML 문서

<body>
	<div></div>
	<img src="img/icon.png">
</body>

CSS 문서

div {
	width: 300px;
	height: 300px;
	background-image: url(../img/icon.png);
}

호스팅 방법

  • 유료 사이트나, '닷홈(dothome)' 과 같이 무료 호스팅 사이트를 이용해서 웹사이트 설정
  • FTP 설정을 위해, '파일질라' 같은 프로그램 등을 이용

실습 1 - 카카오톡 친구 리스트 디자인

  • 디자인 적용이 안 될때는, 브라우저 검사 기능을 이용해서 확인하면 좋음

HTML 문서

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<ul class="friends-lists">
		<li class="friends-list">
			<a href="#">
				<img src="https://via.placeholder.com/50" class="friend-thumbnail">

				<div class="friend-info">
					<h3 class="friend-name">김민호</h3>
					<span class="friend-intro">Minho Kim</span>
				</div>
			</a>
		</li>

		<li class="friends-list">
			<a href="#">
				<img src="https://via.placeholder.com/50" class="friend-thumbnail">

				<div class="friend-info">
					<h3 class="friend-name">박지연</h3>
					<span class="friend-intro">다정한 사람</span>
				</div>
			</a>
		</li>

		<li class="friends-list">
			<a href="#">
				<img src="https://via.placeholder.com/50" class="friend-thumbnail">

				<div class="friend-info">
					<h3 class="friend-name">한성은</h3>
					<span class="friend-intro">헤헷</span>
				</div>
			</a>
		</li>
	</ul>
</body>
</html>

CSS 문서

.friends-lists {
	list-style: none;
}

.friends-lists .friends-list a {
	color: #000000;
	text-decoration: none;
}

.friends-lists .friends-list a .friend-thumbnail {
	border: solid 2px gray;
	border-radius: 20px;
}

.friends-lists .friends-list a .friend-info .friend-name {
	font-size: 20px;
	color: #000000;
}

.friends-lists .friends-list a .friend-info .friend-intro {
	font-size: 15px;
	color: #c8c8c8;
}

실습 2 - 네이버 홈페이지 UI 디자인

  • 줄 간 높이는 line-height 을 사용하여 적용

HTML 문서

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<ul class="living-lists">
		<li class="living-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
				<div class="living-info">
					<span class="type">리빙</span>
					<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
					<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>

					<div class="date-wrap">
						<span class="source">유닠</span>
						<span class="date">3개월 전</span>
					</div>
				</div>
			</a>
		</li>

		<li class="living-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
				<div class="living-info">
					<span class="type">리빙</span>
					<h3 class="title">아이있는 집 주방 1년 간의 소소한 변화</h3>
					<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>

					<div class="date-wrap">
						<span class="source">miju</span>
						<span class="date">1개월 전</span>
					</div>
				</div>
			</a>
		</li>
	</ul>
</body>
</html>

CSS 문서

.living-lists {
	list-style: none;
}

.living-lists .living-item a {
	color: #000000;
	text-decoration: none;
}

.living-lists .living-item .living-info .type {
	color: #c08d31;
	font-weight: 700;
	font-size: 12px;
}

.living-lists .living-item .living-info .title {
	font-size: 13px;
	color: #000000;
}

.living-lists .living-item .living-info .paragraph {
	font-size: 13px;
	color: #404040;
	line-height: 20px;
}

.living-lists .living-item .living-info .date-wrap .source,
.living-lists .living-item .living-info .date-wrap .date {
	font-size: 12px;
	color: #505050;
}

.living-lists .living-item .living-info .date-wrap .date {
	color: gray;
}

.living-lists .living-item .living-info .date-wrap .date:before {
	content: '- ';
}

.living-lists .living-item:hover {
	background-color: pink;
}

.living-lists .living-item a:hover .living-info .title {
	text-decoration: underline;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • 저번 시간에 배웠던 선택자와 가상 선택자의 차이점이 어떤것인지 조금 더 찾아봐야겠음.

해결방법

  • 인터넷 검색을 통해, 저번에 배운 여러 선택자들은 일반적으로 바로 스타일을 적용하는 방식이라는 것을 알았고, 오늘 배운 가상 선택자는 어떤 행위를 하거나, 특정한 순서나 규칙을 통해 CSS문법이 적용되는 스타일이라는 것을 알게 되었다.

학습 소감

  • 오늘은 크롬 브라우저 검사 기능을 통해 그 웹사이트에서 쓰여진 스타일을 보는 방법을 배웠는데, 보는 방법이 아직 익숙치 않아 웹서핑 중에도 웹사이트를 방문할 때 검사 기능을 자주 써보면 좋을듯함
[TIL] 210707
WIL-CSS [Position]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage