#4 CSS

13509 단어 대구 AI스쿨웹프로그래밍Sublime TextCSShtmlCSS

과정명 : 대구 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 선택자의 사용을 실습했다. 선택자의 사용은 어렵지 않았고 강의를 따라한 선택자의 사용도 오타에 의한 오류가 아닌 이상 잘 적용되었다. 다만 앞으로 웹프로그램 코드를 짜게 된다면 선택자의 지정하는데 규칙이 필요하다고 느꼈다. 연습을 위해 코드를 짜보던 중, 규칙없이 패턴 없이 선택자를 지정하니 결국 태그 하나하나를 대조해가며 코드를 짜야 했다.

이 문제는 경험과 노하우의 부족 때문 이겠지만 이후 쉽게 잡아가려면 가장 먼저 설계에 대한 이해가 필요하다고 생각한다. 최초 설계가 제대로 잡힌다면 부모 - 자식 관계의 태그를 따라 하향화 시키고 세부적인 부분에서는 숫자 기호를 사용하는 방법으로 선택자를 지정할 계획이다.

결국 웹프로그래밍은 각 태그의 역활가 기능을 익히는 것 함께 웹사이트의 구조를 입체적으로 이해하는 것이 필요하다고 생각한다. 공간을 나누고 배치할 컨텐츠를 구상하는 능력까지, 원하는 컨텐츠를 원하는 곳에서 실행시키는 능력이 완성되어야한다.

하나의 프로젝트를 만들어 이제 것 배운 내용을 정리하고 앞으로 배울 내용을 차곡차고 쌓을 수 있는 작업을 계획하고 있다. 누더기 웹사이트가 될 수 있지만 적어도 내가 할수 있는 것과 할 수 없는 것들을 구별할 수 있는 좋은 방법이 될듯하다. 물론 새로운 것들이 하나하나 쌓여간다는 재미는 덤이다.

Centos 에서 Nodejs + npm 환경 - 배치 기록
CentOS 7 에서 Node. js 환경 설치 및 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage