Day7, 어제까지 배운 레이아웃을 오늘은 실습했다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 N,O으로 시작하는 태그에 대해서 복습하고 넘어가자.
Inline : <nav></nav>
,<ol></ol>
,<option></option>
Block : <object></object>
,<output></output>
오늘 무엇을 배웠지?
<link>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style0704.css">
</head>
<body>
</body>
</html>
<ul></ul>
-><li></li>
<a></a>
태그로 메뉴 탭 이름을 설정하고, 이 목록 전체를<nav></nav>
태그로 공간을 구분짓는다. ->디자인을 위해 "class=menu" 설정https://developers.kakao.com/docs/latest/ko/kakaotalk-social/common
1. new file-save(kakao0706.html), save(kakao0706.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
2. 기본 설정 + html, css 파일을 연동<link>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/kakao0706.css">
</head>
<body>
</body>
</html>
<ul></ul>
-><li></li>
<a>
태그 이용해서 클릭하면 원하는 페이지로 넘어 가도록 전체를 감싸고, 프로필 사진은 <img>
태그로 설정한다. <div></div>
태그로 프로필 사진과 글영역을 구분짓고, 이름은 <h3></h3>
태그, 상태메세지는 <span></span>
태그로 표현<ul class="kakao-lists">
<li class="kakao-list">
<a href="#">
<img src="https://via.placeholder.com/50" class="kakao-thumbnail">
<div class="kakao-info">
<h3 class="kakao-name">김민호</h3>
<span class="kakao-intro">Minho Kim</span>
</div>
</a>
</li>
<li></li>
태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정!<div>
태그가 동일하게 Inline-Block 속성을 가지도록 설정하고 "kakao-lists .kakao-info h3 { margin: 0; fontsize: 18px; }" 이름 글자 크기를 설정한다. ".kakao-lists .kakao-info span { font-size: 14px; color: #c8c8c8; }" 로 상태메세지의 글자크기와 색상을 설정한다.<a>
태그가 적용되도록 설정한다.https://www.naver.com
1. new file-save(naver0706.html), save(style0706.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
2. 기본 설정 + html, css 파일을 연동<link>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style0706.css">
</head>
<body>
</body>
</html>
<ul></ul>
-><li></li>
<a></a>
태그로 <img>
태그를 감싸서 삽입한 이미지를 클릭했을 때 원하는 페이지로 넘어가도록 설정한다. <a></a>
태그를 만들어 글을 클릭했을 때 원하는 페이지로 넘어가도록 설정하고, <div></div>
태그로 공간을 구분짓는다.<span></span>
태그로 '과학' 부분이라는 글을 적을 수 있는 공간을 만들고, <h3></h3>
태그로 기사 제목을, <p></p>
태그로 본문을, <div></div>
태그로 아래의 기사출처, 기사작성시간을 적을 수 있는 공간을 만든다. <span></span>
태그로 기사 출처와 기사작성시간을 입력한다.<ul class="science-lists">
<li class="science-list">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/170x114">
</a>
<a href="#" class="info-link">
<div class="science-info">
<span>과학</span>
<h3 class="science-title">인체의 신비전에 전시된 뼈는 어디에서 왔을까?</h3>
<p class="science-body">시체나 인체 표본을 이용해 대중에게 해부학 지식을 알려주는 전시회가 종종 열린다. ‘인체의 신비전(BODIES: The Exhibition)’은 이런 전시회의 시조 격이다. 전시된 시체들은 어디에...</p>
<div class="date-wrap">
<span class="source">현대지성</span>
<span class="date">3주일 전</span>
</div>
</div>
</a>
</li>
<li></li>
태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정!+++ TIP!
CSS 레이아웃을 배웁시다
https://ko.learnlayout.com/ 에서 공부!
무엇이 어려웠지?
수업에서는 디자인하는 것보다는 레이아웃을 만들 때 원하는 위치에 영역을 설정할 수 있도록 실습해보는 것이 오늘 실습으로는 더 중요해서 디자인은 넘어갔다. 하지만 나는 내가 직접 배워본걸 확인 해 보고 싶어서 디자인을 직접 해봤다. 그치만 쉽지 않았다. naver 과학부분을 디자인할 때 그림과 글에 마우스를 가져가면 자동으로 제목이 강조되는 기능을 설정하는것이 어려웠다.
어떻게 해결했지?
솔직히 말하면 어려울 것이 없었는데 어려웠다. a:hover 기능만 적용하면 되는 것이었는데, 이때동안은 모든 영역을 하나의 <a>
태그로 묶어서 사진과 글 어디를 선택해도 동일한 태그에 묶여 있었다. 그래서 늘 이 태그에 대해서 hover 기능을 적용하면 되었었는데 이번에는 <a>
태그가 두개니깐 따로 적용해야 하는것이 아닌가 하는 생각이 들었다. 그래서 처음에는 .science-lists image-link a:hover .science-info .science-title {text-decoration: underline;}과 .science-lists info-link a:hover .science-info .science-title { text-decoration: underline;} 이렇게 적용을 했고, 결과는 아무런 변화도 없었다. 그래서 오탈자의 문제인지 class가 저장되지 않은 상태에서 확인을 한건지 여러가지 놓친부분이 있나 확인을 해봤다. 그치만 여전히 변화는 없었고 고민을 하다보니 css 언어 설정 자체를 잘못했다는 판단에 이르렀다. 굳이 2가지로 설정할 필요가 없었고, 2가지로 설정하려다보니 css언어에서 맞지 않는 문법으로 입력했던 것이었다. 그래서 .science-lists a:hover .science-info .science-title { text-decoration: underline;}로 수정해서 다시 입력했고 아주 만족스러운 결과를 얻었다!
그래서?
이번에 배운 내용과 실습은 디자인의 작은 요소들 보다는 배치와 정렬에 중점을 둔 내용이었다. 그래서 일반적인 디자인(폰트, 색상, 크기 등)을 하는 것에 비해서 이해를 필요로 하는 개념들이 많았고 이를 잘 소화하지 못하면 큰일 나겠다는 생각이 들었다...! 위기감은 느껴졌으나 위기감 대비 실력은 부족하다는 것을 실습을 하면서 깨닫고 조금은 의욕을 잃었다. 점점 더 많고 어려운 내용을 배울 것 같은 느낌이 들기 때문에 벌써부터 낙오하면 안된다. 복습해서 내걸로 만들자!
sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0706