과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍_김인원_3_CSS_210508
주제 : css
css
가상 선택자
가상 선택자는 css에 내장되어 있는 선택자 이다. 따로 지정하지 않더라도 선택자를 사용할 수 있으며 태그를 지정하여 속성을 적용할 수 있다. 예를 들어 li태그로 만들어진 리스트에서 특정한 줄을 지정하는 등에 활용된다.
프로젝트의 구성
html, css 그리고 java script 등 웹프로그래밍에 필요한 것들을 한곳에 모아 작업하는 것을 이야기한다. 웹프로그래밍에서 프로젝트를 구성한다는 것은 작업의 능률과 함께 이후 웹페이지의 유지보수에도 효과적이다. 프로젝트 구성에는 웹 문서들 뿐만아니라 이미지, 영상과 같은 소스들의 집합도 포함된다.
카카오톡 친구목록 구현 해보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/kakao_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>Review
class 선택자의 사용을 실습했다. 선택자의 사용은 어렵지 않았고 강의를 따라한 선택자의 사용도 오타에 의한 오류가 아닌 이상 잘 적용되었다. 다만 앞으로 웹프로그램 코드를 짜게 된다면 선택자의 지정하는데 규칙이 필요하다고 느꼈다. 연습을 위해 코드를 짜보던 중, 규칙없이 패턴 없이 선택자를 지정하니 결국 태그 하나하나를 대조해가며 코드를 짜야 했다.
이 문제는 경험과 노하우의 부족 때문 이겠지만 이후 쉽게 잡아가려면 가장 먼저 설계에 대한 이해가 필요하다고 생각한다. 최초 설계가 제대로 잡힌다면 부모 - 자식 관계의 태그를 따라 하향화 시키고 세부적인 부분에서는 숫자 기호를 사용하는 방법으로 선택자를 지정할 계획이다.
결국 웹프로그래밍은 각 태그의 역활가 기능을 익히는 것 함께 웹사이트의 구조를 입체적으로 이해하는 것이 필요하다고 생각한다. 공간을 나누고 배치할 컨텐츠를 구상하는 능력까지, 원하는 컨텐츠를 원하는 곳에서 실행시키는 능력이 완성되어야한다.
하나의 프로젝트를 만들어 이제 것 배운 내용을 정리하고 앞으로 배울 내용을 차곡차고 쌓을 수 있는 작업을 계획하고 있다. 누더기 웹사이트가 될 수 있지만 적어도 내가 할수 있는 것과 할 수 없는 것들을 구별할 수 있는 좋은 방법이 될듯하다. 물론 새로운 것들이 하나하나 쌓여간다는 재미는 덤이다.
