과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권_4레이아웃_210509
주제 : css
css 레이아웃 실습
그 동안의 수업내용을 토대로 웹페이지의 레이아웃을 구성하는 실습을 진행했다. 또한 또 다중페이지로 구성된 사이트의 특성을 적용하여 여러 웹페이지를 연결하는 작업까지 진행하였다.
menu 페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MENU</title>
</head>
<body>
<nav class="menu">
<ul>
<li>
<a href="index.html">메뉴 버튼</a>
</li>
<li>
<a href="kakao.html">카카오</a>
</li>
<li>
<a href="naver.html">네이버</a>
</li>
</ul>
</nav>메인화면의 개념으로 버튼이 나타난다.
border 속성이 적용된 객채들의 배치
.menu li {border-top: solid 1px red; border-bottom: solid 1px red; border-left: solid 1px red; } .menu li:last-child { border-right: solid 1px red; }border속성을 가진 값들이 배치될 때는 border값이 겹치기때문에 다음과 같은 방법으로 border속성을 줄 수 있다.
텍스트의 중앙정렬 방법
.menu li {width: 100px; height: 50px; background-color: yellow; text-align: center line-height: 50px }객체의 height값이 있을 경우 line-height속성을 사용하여 텍스트의 상하 정렬을 할 수 있다. line-height의 속성값은 height값을 기본적으로 따라가지만 폰트나 다른 조건에 따라 조정할 수 있다.
.menu li {width: 100px; background-color: yellow; text-align: center padding-top: 15px; padding-bottom: 15px }height 속성이 없을때는 padding-top, padding-bottom속성을 사용하여 상하의 높이값을 주어 정렬을 맞춘다.
카카오톡 친구페이지
<ul class="kakao-lists">
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>카카오톡 친구목록 화면을 구성해본다. 앞에서 만든 메인페이지의 메뉴구역을 바탕으로 다음 컨텐츠를 추가한다.
카카오톡 친구목록 화면은 이전에도 구성해 본적 있지만 이렇게 레이아웃까지 정렬하지는 않았었다. 정렬이 되면서 당시에는 제대로 이해되지 않았던 속성들이 조금 더 쉽게 다가왔다. 아직도 display: 속성이 쉽게 이해되지는 않는다.
naver 페이지
<ul class="living-lists">
<li>
<a href="#" class="image-link">
<img src="https://via.placeholder.com/170x114">
</a>
<a href="#" class="info-link">
<div class="living-info">
<span>리빙</span>
<h3>퇴사 후, 36년 된 노후주택을 고쳐 짓고 살아요</h3>
<p>Nice to meet tooNice to meet tooNice to meet tooNice to meet tooNice to meet tooNice to meet tooNice to meet tooNice to meet tooNice to meet t</p>
<div class="date-wrap">
<span class="source">집꾸미기</span>
<span class="date">2주일 전</span>
</div>
</div>
</a>
</li>
</ul>
<div class="title-wrap">
<h3>임대차법 9개월, 서울 전세 줄고 월세 늘었다.</h3>
<div class="btn-wrap">
<div class="btn-left-wrap">
<button type="button">좋아요</button>
<button type="button">댓글</button>
</div>
<div class="btn-right-wrap">
<button type="button">요약</button>
<button type="button">크기</button>
<button type="button">팩스</button>
<button type="button">공유</button>
</div>
</div>
</div>menu페이지의 버튼과 함께 네이버 메인페이지의 한 세션 그리고 뉴스페이의 상단을 만들었다. 기본적으로 강의를 잘 따라 갔지만 .livng-lists 영역이 제대로 완성되지 않았다.
R, 엑셀과 엑세스의 프로시저를 다뤄보며 느꼈던 포인트 중 가장 큰 것이 있다. 어떤 프로그램이든 따라한 코드에서 기능이 제대로 작동하지 않는 상황에서, 거의 대부분의 문제는 프로그램 오류가 아닌 내 자신의 오타에 원인이 있다는 것이다. 강의를 다시한번 천천히 보는 방법이 있지만 그건 최후의 수단으로 놓아두고 원인을 한번 생각해 보기로 했다.
먼저 문제는 강의에서는 구현한 리빙세션의 컨텐츠가 이미지의 높이를 넘어가지 않고 적용되는데 내가 만든 코드에서는 객체들사이의 간격이 생긴다는 것이다. 처음에는 p태그에 입력된 텍스트의 양이 문제라고 생각하고 줄여 보았지만 간격에는 변화가 없었다.
검사를 통해 확인해보면 h3태그와 p태그에 margin값이 상하로 적용되어 있다. 추측에는 css상단에서 ul태그의 magin값과 padding값을 초기화가 제대로 적용되지 않은 것 같다. 다시한번 강의를 보며 오류를 수정하겠다.
Review
사실 그동안은 속성들의 기능과 사용방법을 배우면서도 제대로 이해되지 않은 부분들이 많았다. 속성이 가진 기능들의 적용이 개별의 속성에서는 이해가 되었지만 여러 객체들이 뒤섞이며 공부한 내용 또한 섞이는 기분이 들었다.
그동안 한번씩 진행했던 작업들이지만 레이아웃 실습을 통해 익숙한 배치로 정렬되는 정보들을 보며 css속성들이 조각이 맞춰지는 퍼즐 처럼 완성되는 기분이 들었다. 물론 전부를 맞춘 것은 아니다.
첫째로 naver의 세션에서 아직 객체들의 간격을 잡아내지 못했고 display 속성과 block/ inline객체들의 특징에 대한 내용에서 정확히 이해되지 않는 부분이 있다.
먼저 다시한번 강의 내용 복습을 통해 문제해결의 실마리를 찾고 찾지 못한다면 다음을 생각해보겠다.
