[대구AI스쿨] 개발일지 4일차 210701

김선아·2021년 7월 1일

대구AI스쿨 개발일지

목록 보기

4/46

학습 내용

1. 가상선택자

1) 행동에 대한 가상 선택자

<a href="https://www.naver.com/"></a>

<input type="text">

css ↓

a:link {
	color: red;
}

a:active {
	color: blue;
}

a:hover {
	color: pink;
}

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

a:link : 방문한 적이 없는 link에 대해서 디자인을 적용할때 사용.
클릭해서 방문한 적이 있는 link에는 적용되지 않는다. 새로고침하면 다시 적용됨
(다른 분의 질의응답에서 보고 추가한 내용)
active : 클릭했을떄 글자 색, 폰트 디자인을 변경할 수 있음
hover : 글자 위에 마우스를 올렸을때 디자인이 변경되게 함
focus : input 태그로 만들어진 박스안에 커서가 있을때를 focus라고 하는데, focus 상태에서 디자인이 변경되게 한다.

2) 일정한 규칙에 따른 가상 선택자

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

css ↓

li:first-child {
	color: red;
}

li:last-child {
	color: blue;
}

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

li:first-child : li태그의 첫번째 자식태그에 적용 (메뉴 1)
li:last-child : li태그의 마지막 자식태그에 적용 (메뉴 6)
li:nth-child(n) : 괄호에 들어간 숫자에 따라 해당 자식태그에 적용
ex1) li:nth-child(2) : 두번째 자식태그인 메뉴 2에 적용됨
ex2) li:nth-child(2n) : 짝수번째 태그에 적용됨
ex3) li:nth-child(2n+1) : 홀수번째 태그에 적용됨

3) before, after 가상 선택자

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

css ↓

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

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

before : 태그와 글자 사이의 공간
after : 글자와 태그 사이의 공간
둘 다 문자를 넣을 수도 있지만, html에서 작성한 것과는 달리 정보가 담겨있지는 않다. 그냥 디자인일 뿐

이 홈페이지에서 표시된 글자도 before, after태그를 이욯한 방식이다.

2. dothome에 업로드

1) 파일 경로 지정

지금까지는 html과 연동된 css파일과 이미지 파일들을 한 폴더 안에 넣어서 사용했는데, 실제 웹사이트에서는 각기 다른 폴더를 이용하여 관리한다.

css : css파일을 모아놓은 폴더
img : 이미지 파일을 모아놓은 폴더 (보통은 png파일을 많이 쓴다.)
js : java script 파일

꼭 폴더 이름을 이렇게 지정하지 않아도 되지만, 일반적으로 실무에서 많이 쓰는 폴더명이다.

다른 폴더에 들어있는 css파일을 연동하는 방법
<link rel="stylesheet" type="text/css" href="css/style.css">
href의 속성값으로 파일 경로를 적어주면된다.

css파일에서 다른 폴더에 들어있는 이미지파일을 연동하는 방법

css↓
div {
	width: 300px;
	height: 300px;
	background-image:  url(../img/icon.png);
}
../ : 현재 작성되는 css파일이 들어있는 폴더에서 한번 나가기
나머지는 위와 똑같이 적용시켜주면 된다.

2) 마이닷홈/파일질라로 웹페이지 생성해보기

마이닷홈-무료웹호스팅을 신청하여 도메인을 만든다
파일질라 client를 설치하여 실행 후, 도메인 입력(http://는 빼고 입력하기), FTP 아이디, 비밀번호, 포트 : 21을 입력 후 빠른연결 버튼을 누른다.
지금까지 작성한 html,css파일 등을 업로드한다.
다시 도메인으로 접속해 보면 그동안 작성한 것이 웹페이지로 보이게 된다.

3. 카카오톡 친구목록 디자인

2일차에서는 html로 목록을 구성하는 코딩만 배웠다면, 이번에는 css로 디자인하는 코딩을 실습한다.

<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">Do the Next things</span>
			</div>	
		</a>
		
	</li>
</ul>

css↓

.friends-lists {
	list-style: none;  /* 목록앞에 오는 점을 제거  */
}

.friends-lists .friends-list a {
	color: #000000;   /* 검은색지정코드 */
	text-decoration: none;  /* a태그하면 있는 밑줄을 제거 */
}

.friends-lists .friends-list a .friend-thumbnail {
	border: solid 2px gray;
	border-radius: 20px; /* 50%로 지정하면 이미지가 원형이 된다. */
	}

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

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

/* cascading : 앞에서 폰트 50px, 검은색으로 지정되었던 친구이름을 변경*/
/* 위의 코딩을 복사 붙여넣기 하면된다. 똑같은 코딩일 경우, 나중에 작성된 것이 우선적용 */

.friends-lists .friends-list a .friend-info .friend-name {
	font-size: 50px;
	color: red;
}

웹실행을 시킨 후, 오른쪽 마우스버튼을 눌러 '검사' 단추를 누른다.
마우스 커서를 html에 올리면 해당 부분의 css가 나타나는데, css코드 앞의 체크박스를 해제하면 적용되었던 css스타일이 적용해제된다.

html에 마우스를 올렸을때 css에서 나타나는 부분이 없다면 코드를 잘못 입력했을 가능성이 크다. 잘못 작성한 부분을 찾아보기

웹페이지에 적용된 케스케이딩을 확인하는 방법

해당 css에서 취소선이 그어진 부분이 이전에 작성한 스타일이라는 것을 확인할 수 있다. 현재 적용되고 있는 스타일이 제일 첫 부분에 나온다.

서버에 저장되지는 않지만, 실제 운영되는 네이버 등의 사이트에서도 css적용을 풀거나, 폰트 색상/크기 등을 변경할 수 있다. (서버에 저장되지 않으므로 새로고침하면 원래대로 돌아간다.)

4. 네이버 포스팅 영역 디자인 실습

<ul class="">
		
		<li class="book-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114">
				<div class="book-info">
						
					<span class="type">책방</span>
					<h3 class="title">'늙지않는 뇌'를 위해 딱 5가지만 기억하세요!</h3>
					<p class="paragraph">"죽기 전에 나도 한 번은 날아오르고 싶어서..."</p>
						
					<div class="date-wrap">
						<span class="source">인터파크 북DB</span>
						<span class="date">3일 전</span>
					</div>
				</div>
			</a>
		</li>

		<li class="book-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114">
				<div class="book-info">
						
					<span class="type">책방</span>
					<h3 class="title">5개 국어 능력자 손미나의 외국어 공부법</h3>
					<p class="paragraph">★6월 넷째주 출간예정★ ★11만 팔로워가 열광한 3단계 공부법★</p>
						
					<div class="date-wrap">
						<span class="source">토네이도 출판사</span>
						<span class="date">3주일 전</span>
					</div>
				</div>
			</a>
		</li>

		<li class="book-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114">
				<div class="book-info">
						
					<span class="type">책방</span>
					<h3 class="title">지속 가능성을 생각한다면, 저탄건지 키토식</h3>
					<p class="paragraph">[신간+이벤트] 바쁜 당신도 지속 가능한 저탄건지 키토식</p>
						
					<div class="date-wrap">
						<span class="source">레시피팩토리</span>
						<span class="date">1주일 전</span>
					</div>
				</div>
			</a>
		</li>

		<li class="book-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114">
				<div class="book-info">
						
					<span class="type">책방</span>
					<h3 class="title">돈의 흐름을 알아야 부자가 될 수 있다!</h3>
					<p class="paragraph">[이 책은 출판사에서 도서 협찬 받았습니다.]</p>
						
					<div class="date-wrap">
						<span class="source">감동쟁이</span>
						<span class="date">2일 전</span>
					</div>
				</div>
			</a>
		</li>

				
	</ul>

css↓

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

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

.book-lists .book-item .book-info .type {
	color: #42be6f;
	font-weight: 700;
	font-size: 12px;
}

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

.book-lists .book-item .book-info .paragraph {
	font-size: 13px;
	color: #404040;
	line-height: 20px;  /* 줄간격 */
}


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

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

.book-lists .book-item .book-info .date-wrap .source:after {
	content: " -";
}

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


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

어려웠던 점

늘 선생님이 하는 그대로 따라쓰느라 오류가 전혀 나지 않았었는데, 처음으로 마지막 실습인 네이버 포스팅 영역을 내 컴퓨터에서 실시간으로 보이는 페이지를 사용했다. 클래스 이름을 아주 조금씩 다르게 설정했는데, 마지막에 li 부분을 hover를 사용해서 background-color를 지정했는데 작동이 되지 않았다....
뭐때문 인지 잘 모르겠다.

+왜인지 이 개발일지를 다 쓰고 F5를 눌렀더니 갑자기 해결되었다;;;;

해결방안

~~해결하지 못함. 혹시나해서 html코드까지 다시 점검중이다.~~
왜인지 이 개발일지를 다 쓰고 F5를 눌렀더니 갑자기 해결되었다;;;;

학습소감

오늘은 css의 실습까지해보았는데, 2일차에서 html실습을 했을때 사용했던 화면을 그대로 사용해서 더 이해하기 쉬웠던 것 같다.
그땐 그냥 공간을 나누는데서 그쳤다면, 지금은 그 공간 하나하나에 디자인을 넣는 것인데 이렇게 홈페이지를 하나하나 구성해 나가는거구나 실감이 났다.
html만 했을 때는 아무래도.. 공간은 다 만든건 맞는데 너무 투박해서 이런게 실제로 사용이 될 수가 있나? 하는 생각이 들었었다.

그리고 지난 2일차 실습에서도 실제 웹사이트(네이버 등)에서 검사버튼으로 적용된 html를 확인해봤었지만, 뭐가뭔지 알기 힘들었었는데 이번에는 css까지 배우고 나서 다시 검사를 눌러보니 조금은 어떻게 구성이 되는지 눈에 보이는 듯해서 신기했다.
그리고 마지막 실습은 실제 네이버메인에서 적용된 css를 조금 흉내냈기때문에 더 이해하는데에 도움이 된 것 같다.

주말에 시간이 된다면, 네이버나 다음같은 페이지가 아니라 아예 다른 홈페이지를 모방연습을 해 보는것도 좋을것 같다.
검사에서 실제 홈페이지에 적용된 코드를 확인해 보는게 제일 실력향상에 도움이 되지 않을까 생각한다.

아직은 코드 보는 것이 아주 익숙하지는 않지만, 자꾸하다보면 눈에 들어오는걸 고작4일만에 느꼈기 때문에 찬찬히 진행해보려고 한다.

~~일단은 아직 오류가 나고있는 hover부분을 다시 수정해야할듯...~~
왜인지 이 개발일지를 다 쓰고 F5를 눌렀더니 갑자기 해결되었다;;;;

+개발일지를 올리고 나서 다른분들이 멘토님을 태그해서 질문한 내용들을 보는데 엄청 도움이 되었다. 내가 생각해보지 못한 부분을 질문해주신 분들도, 내가 1일차부터 궁금해서 시도해보았던 것도 있어서 늦은 시간이지만 댓글도 달고.. 역시 열심히 하는 사람들의 모임에 있으니 서로 토론해가며 성장하는 느낌이라서 정말 뿌듯하다!