개발일지 210701

38408 단어 태그가점점줄어듬대구AI스쿨대구AI스쿨

4일차 요약

  • 가상선택자
  • 일반적인 프로젝트 폴더의 구성과 디렉터리 링크
  • 브라우저의 검사 기능을 통해 완성된 웹페이지를 확인하면서 학습하기

학습 보고

실습 내용 / 결과물 출력 첨부

CSS문법(2)

가상선택자

  • 행동과 규칙에 의해 디자인을 적용한다.
  • 가상선택자를 적용할 때는 기본적인 선택자를 먼저 지정한 다음 콜론(:)으로 구분해 가상선택자를 입력한다.

html이 다음과 같을 때

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

->

네이버

link: 방문한 적 없는 링크에 대한 디자인 적용

a:link {
color: red;}

'네이버'의 글자색이 빨간색으로 적용

active: 링크를 클릭한 상태의 디자인 적용

a:active {
color: blue;}

'네이버'를 클릭했을 때 글자색이 파란색

hover: 마우스오버 상태에서의 디자인 적용

a:hover {
color: pink;}

'네이버'링크 위에 마우스를 올렸을 때 분홍색

focus: 주로 인풋태그에 사용. 입력란을 클릭해 'focus상태'가 되었을떄의 디자인 적용

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

입력 창을 클릭하면 아래와 같이 빨간색 태두리가 생김

규칙을 적용하는 가상선택자

html

<ul>
	<li>menu1</li>
	<li>menu2</li>
	<li>menu3</li>
	<li>menu4</li>
	<li>menu5</li>
	<li>menu6</li>
</ul>

->

  • menu1
  • menu2
  • menu3
  • menu4
  • menu5
  • menu6

first-child: 첫 번째 대상에 디자인 적용

 li:first-child {
color: red;}

menu1이 빨간색 글자가 됨

last-child: 마지막 대상에 디자인 적용

li:last-child {
color: blue;}

menu6이 파란색

nth-child(): 임의로 지정한 대상에 디자인 적용

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

menu2가 회색

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

짝수번째 항목들이 회색

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

홀수번쨰 항목들이 회색
(왜 2n -1이 아닌것이지??????)

before / after 가상선택자

HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성

html

<ul>
	<li>login</li>
	<li>signin</li>
	<li>info</li>
	<li>customer</li>
</ul>

->

  • login
  • signin
  • info
  • customer

CSS

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

결과출력

프로젝트 진행 연습

프로젝트 폴더 생성

  • 프로젝트 폴더
    - index.html
    • css폴더
      • style.css
    • img폴더
      • 임의의 이미지 파일
    • js(자바스크립트)폴더

이렇게 기본 구성하는 것이 일반적이다.
이하 예제는 디렉터리가 위와 같이 구성되어 있다는 전제하에 진행함.

문서 작성에서 파일들 연동하기

  • index.html 파일에서 style.css를 링크.

    <link rel="stylesheet" type="text/css" 
      href="css/style.css">

  • index.html에서 이미지 파일 태그

    <img src="img/임의의 이미지 파일.png">

이처럼 작성중인 문서의 위치를 기준으로 하위 폴더에 진입하여 연동한다. 폴더명 뒤에 '/'를 넣어서 구분.

  • 자신 위치보다 상위의 폴더로 경로지정

    html

    <div></div>

    CSS

    div {
background-image: url(../img/임의의 이미지 파일.png);}

style.css 파일을 기준으로 경로를 지정한다. '../'으로 상위 폴더로 이동 후 나머지 경로를 지정한 모습.

호스팅 서비스 생성

기술적인 이해가 없어서 그냥 따라했다.. 실습용 도메인이 생김.

예제 연습 - 카카오 친구목록

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;
}
/*커스텀*/
.friends-lists .friends-list a .friend-info .friend-name {
	font-size: 50px;
	color: red;
}

결과물 출력

  • css파일과 연동하기
  • 각각 항목들에 클래스를 만들어줌
  • css를 통해 디자인 적용
  • 완전히 동일한 대상을 지정해서 기존 코드를 유지하면서 디자인 재적용해보기(cascading)

예제연습 네이버

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-ltem">
			<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">아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 </p>
					<div class="date-wrap">
						<span class="source">유닠</span>
						<span class="date">3개월 전</span>
					</div>
				</div>
			</a>
		</li>
		<li class="living-ltem">
			<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">아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 </p>
					<div class="date-wrap">
						<span class="source">민주</span>
						<span class="date">3개월 전</span>
					</div>
				</div>
			</a>
		</li>
	</ul>
</body>
</html>

CSS

.living-lists {
	list-style: none;
}
.living-lists .living-ltem a {
	color: #000000;
	text-decoration: none;
}
.living-lists .living-ltem .living-info .type {
	color: #c08d31;
	font-weight: 700;
	font-size: 12px;
}
.living-lists .living-ltem .living-info .title {
	font-size: 13px;
	color: #000000;
}
.living-lists .living-ltem .living-info .paragraph {
	font-size: 13px;
	color: #404040;
	line-height: 20px;
}
.living-lists .living-ltem .living-info .date-wrap .source,
.living-lists .living-ltem .living-info .date-wrap .date {
	font-size: 12px;
	color: #505050;
}
.living-lists .living-ltem .living-info .date-wrap .date {
	color: gray;
}
.living-lists .living-ltem .living-info .date-wrap .date:before {
	content: '| ';
}
.living-lists .living-ltem:hover {
	background-color: pink;
}
.living-lists .living-ltem a:hover .living-info .title {
	text-decoration: underline;
}

출력 결과

추가 학습

미해결 - 솔루션

css에서 오타 때문에 한참 헤매었다. 역시 복붙하자.

질문거리

x

복습

실습도 실습이지만 만들어진 웹사이트에서 검사버튼을 통해 요소들을 직접 보고 학습하는 것이 핵심일듯.

학습 소감

솔찍히 지겹긴 하다...
이해가 어려울 내용은 하나도 없지만 내가 하라고 하면 잘 못하겠지.
하지만 실습 과정을 반복하면서 내 기술이 된다면 만족감이 들겠지?

[Web Design] The Killer Website Project 학습내용정리 3
😎멋찐PR 날려보자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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