2021.07.06 CSS-5
Day7, 어제까지 배운 레이아웃을 오늘은 실습했다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 N,O으로 시작하는 태그에 대해서 복습하고 넘어가자.
Inline : <nav></nav>,<ol></ol>,<option></option>
Block : <object></object>,<output></output>
오늘 무엇을 배웠지?
실습하기
네이버 메뉴 탭 만들어보기+디자인
- new file-save(index0704.html), save(style0704.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
- 기본 설정 + html, css 파일을 연동
<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" 설정 - 이제부터 CSS언어로 디자인함
5-1. "html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
5-2."ul {list-style: none;}" 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다.
5-3. "a { color: #000000; text-decoration: none;}" 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다.
5-4. ".menu li { float: left; width: 100px; height: 50px; background-color: yellow; border: solid 1px red; }" float 기능으로 메뉴 탭들을 좌->우 정렬로 정렬하고, 또,너비, 높이, 배경색, 테두리 색 등 디자인한다.
5-5. "display: block;" 으로 탭안의 글자외의 여백을 선택해도 원하는 페이지로 넘어가는 기능을 설정한다. "text-align: center;"로 메뉴 탭 안의 글자를 중앙정렬(x축기준)한다. 또 높이가 고정값인경우 "line-height: 높이px;"로 탭 안의 글자를 중앙정렬(y축기준)한다.(if/ 높이 고정값이 없는 경우 "padding-top: ;", "padding-bottom: ;"으로 위아래 공백을 동일하게 만들어 중앙정렬한다.)
5-6.".menu li a:hover { color: blue; }"로 메뉴 탭에 마우스커서를 올릴때 변화하도록 설정한다.
5-7. 5-4.에서 설정한 border는 a태그끼리 만나는 지점에 2px이 되기 때문에 따로 설정한다.-> 5-4.에서 설정한 border는 없애고 "border-top: solid 1px red; border-bottom: solid 1px red; border-left: solid 1px red;"를 추가하고, ".menu li:last-child { border-right: solid 1px red; }"로 설정해 가장 마지막에 있는 a 태그의 오른쪽에만 테두리를 살려 모든 a태그의 테두리를 1px로 설정할 수 있다!
카카오 친구 리스트 만들어보기+디자인
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>태그로 표현 - 디자인을 위해 "class" 설정
<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>태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정!- css언어로 디자인
7-1. "html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
7-2. "ul {list-style: none;}" 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다.
7-3. "a { color: #000000; text-decoration: none;}" 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다.
7-4. ".kakao-lists li img { border-radius: 20px; margin-right: 10px; } 프로필 사진의 경계를 둥글게 하고 프로필 사진과 글 사이의 공백이 있기 때문에 "marign-right: ;" 으로 설정한다.
7-5. ".kakao-lists li img, .kakao-lists li .kakao-info { vertical-align: middle; }" "vertical-align: middle;"로 프로필 사진옆에 글이 배열되도록(x축에 중앙으로 정렬) 설정한다.
7-6. "kakao-lists li .kakao-info { display: inline-block; }" 으로<div>태그가 동일하게 Inline-Block 속성을 가지도록 설정하고 "kakao-lists .kakao-info h3 { margin: 0; fontsize: 18px; }" 이름 글자 크기를 설정한다. ".kakao-lists .kakao-info span { font-size: 14px; color: #c8c8c8; }" 로 상태메세지의 글자크기와 색상을 설정한다.
7-7. ".kakao-lists li a { display: block; }" 으로 프로필의 여백에도<a>태그가 적용되도록 설정한다.
7-8. ".kakao-lists li {margin-bottom: 10px;} 으로 프로필끼리의 간격을 설정한다.(margin이나 padding 값 적용)
네이버 '과학'부분 만들어보기+디자인
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>태그로 기사 출처와 기사작성시간을 입력한다.- 디자인을 위해 "class" 설정
<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>태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정!- css 언어로 디자인!
9-1."html, body { margin: 0; padding: 0;}" 으로 웹브라우저의 경계에 주어진 기본값을 없앤다.
9-2. "ul {list-style: none;}" 리스트 스타일에 기본값으로 설정된 목록 항목의 점을 없앤다.
9-3. "a { color: #000000; text-decoration: none;}" 메뉴 탭의 색을 검정색으로 설정하고 그 외에 a태그에 대한 기본값을 없앤다.
9-4. ".science-lists {width: 750px;}" 전체 영역의 너비를 설정해 준다.
9-5. ".science-lists .image-link, .science-lists .info-link {display: inline-block; vertical-align: middle;}" 사진과 글이 옆으로 나란하게 배열되도록 하도록 한다. 이때 margin 값을 적용해 사진과 글 사이의 여백을 만든다.
+++ 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
Author And Source
이 문제에 관하여(2021.07.06 CSS-5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyeri_jung14/2021.07.06-CSS-5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
