D-3 Non-contact.

 

 

 

D-3 

Non - contact.

 

 

 

border-radius: ;

스타일 태그에서 쓸 수 있는데,

 

이미지의 가장자리를 둥글게 처리할 때 썼다.

 

border: 경계선

 

radius: 반지름

 

border-radius :  모서리를  둥글게

 

코드

 

 

 

이런식으로 이미지의 가장자리가 둥글게 처리가 된다. 

 

(숫자뒤엔 px을 꼭 입력하도록 할 것....

계속 실수를 해서 출력이 안되길래 

무슨 일인가 싶었다..)

 

 

 

 

---

 

중첩 리스트 복습

 

<ol>, <ul>둘을 중첩하여 사용하고, 

리스트 앞에 붙는 숫자나 점을 일일히 없애기는 힘드므로, 두 리스트를 중첩하여 사용한다.

 

 

왼쪽이 출력화면, 오른쪽은 코드화면.

 

 

 

스타일 태그(<style>)에서

list-style-type: none; 

여기서 none;을  입력했기때문에 

 

<ol> 태그의 앞의 숫자가 사라진 것이다. 

 

 

 

 

 

 

 

 

 

---

 

id, class - css 선택자

 

 

 

 

 

 

스타일 태그 안의

#my_h1{  color: red;} 코드는 

 

id -  Identification (신원, 신분 등의 뜻을 가진 말이다.)

 

<h1 id="my_h1">제목1</h1>

 

h태그 안에  id를 정해주고 스타일 태그에서 속성을 정해줄 수 있다.

 

 

 

 

 

 

 

 

출력화면

 

---

<h> 태그 뿐만 아니라 <li> 태그에도 사용한다.

 

아래의 코드와 출력사진처럼, 

 

 

 

 

중요한 점, 

 

id = 스타일 태그에서는 #으로 붙여야 하고, ( 위의 코드 참조)

 

class = . 으로 붙여야 한다. (점)

 

 

---

<div> 

divide : 나누다.

 

division : 영역.

 

div 는 block 속성이다. 무슨 말이냐면 

 

블록형태는 세로로 층층이 쌓인다. 아래는 출력화면이 아니라, 이해를 돕기 위한 그림이다.

 

 

좌 예시, 우 출력사진

 

 

display 에 들어가는 속성이 3가지가 있다고 배웠는데, 

 

inline,

block,

inline-block;

 

이렇게 세 가지가 있다.

블록은 위에서 설명했으니 인라인과 인라인 블록의 설명,

---

inline,   

가로로 배치가 된다.

크기 지정 불가능, 글자 크기만큼

 

display: inline;  (우 출력화면)

 

 

inline-block; 

가로배치, 크기 지정 가능

 

display: inline-block; (우 출력화면)

 

 

---

웹디자인 기능사 실기 시험준비

 

수업중에 웹디자인 기능사 문제를 예제로 연습하는 시간이 있었다.

 

내가 응용력이 부족해서인지 예제를 비슷하게 따라하는 걸 헤멨었다. 

 

강사님의 설명을 듣고보니 이해가 가서 뒤늦게나마 잘 따라해서 다행이다..

 

아래 사진은 수업시간에 참고한 웹디자인 기능사 공개문제 와이어프레임.

 

 

웹디자인 기능사 공개문제

 

코드

출력사진

 

일일히 세세하게 슬라이드를 넣고 로고자리를 하진 않았었고,

대강 블록 모양만 잡아서 하였다. 색을 다르게 해서 각 구역을 블록별로 나눈다.

 

---

 

 

숙제아닌 숙제로 내주신 것은, 

 

 

 

 

 

 

코드화면

 

코드화면의 스타일 태그를 보면, # 과 . 으로 채운것을 볼 수 있는데, 

 

id - #  클래스는 . 으로

 

속성을 정해줄 수 있다. 

 

화면의 클래스를 보면 width 를 400씩 3번 합쳐야 1200인데

 

390픽셀씩 나눈 이유는,

 

이런식으로 오류가 나며 나오지 않을 수 있기 때문이다.

 

그래서 1200을 꽉 채우는 것이 아니라, 조금씩 빼서 1200을 채우는 것이다. 

 

여기서 display: inline; 으로 하면 되지 않을까 생각을 해봤지만, 

 

그렇게 하면,

 

 이런식으로 출력이 된다.

 

그리고 꿀팁!

 

코딩할 때 중요한 것은 가독성인데, 가독성이 좋을려면 

 

그만큼 코드를 깔끔하게 정리해야 하는 건데, 매번 tab키로 

 

일일이 정리하는 것이 아니라, 

 

컨트롤 a로 전체선택 후 

컨트롤 k 누름 -  f 로 한번에 다 정리할 수 있다.

 

너무 편하고 좋은데...?

 

오늘도 고생했다. 내일도 집중하기!

 

---

 

end.