[HTML+CSS] 리트리버 과제, just쇼핑몰 예제, position 추가부분

1. Position

위치지정 속성

 

  1.1 Position:static

정적인(안 움직인다.), 기본속성, 모든요소의 디폴트 속성

(div의 display의 기본 속성은 block인것 처럼)

 

 1.2 Position:relative

상대적인 위치 배치

자기 자신 기준으로 위치를 움직인다.

절대적이지 않고 상대적인 값이다.

 

1.3 position:absolute

절대적인, 위치지정을 조상 기준으로 한다.

상위요소 기준 : 부모, 조부모, 고조, 증조 (주로 부모 기준으로 위치를 정한다)

relative(부모, 위치지정)
   absolute(자식)
>>>부모에 position relative를 주고(left, top 안줘도 됨) 자식에 absolute를 주면 부모 기준으로 위치를 정한다.

 

1.4 position:fixed;

절대적인 + 위치고정, 위치지정을 조상 기준으로 한다.

페이지 레이아웃에 공간을 배정하지 않는다.

 

1.6 Position:sticky

>> sticky는  static처럼 레이아웃에 공간을 배정하고, fixed처럼 스크롤 이동이 있을때 위치를 고정한다.

static처럼 오프셋에 따라 위치가 변하지 않는다.

 

2.input type

  2.1. <input type="checkbox">

HTML <label> 요소는 사용자 인터페이스 항목의 설명을 나타냅니다. input type= "checkbox"같은 인터페이스와 같이 쓰여 텍스트로 설명하는 역할을 한다. 

 

  2.3. <input type="radiobox">

 

 

 

>> name이 같으면 radio그룹이 묶여서 하나만 선택가능하다. 다른건 자동으로 선택 해제된다.

 

>>>name을 다르게해서 그룹을 나누면 테스트 결과와 같이 여러가지 각각의 문제를 선택할 수 있게 한다.

 

3. 리트리버 과제 풀이

 

>>>h1에 display:inline-block;을 넣으면 span과 같은 줄에 사용할 수 있다.

 

<a href="#">  본인 페이지로 이동(하이퍼링크)

a태그는 기본적으로

text-decoration: underline;

이므로, none으로 바꿔주면 밑줄이 사라진다.

 

이런식으로 ul 하위로 li를 설정 후 이미지 넣기

ul > li > a > img 순으로 배치

 

 

 

 

설명글을 a태그 안에 배치

확인을 위해 배경색 지정 span은 디폴트 display값이 인라인이다.

 

4. 웹디자인기능사 - just쇼핑몰 문제풀이

 

logo를 움직이나 a태그를 움직이나 똑같다.

padding을 줘도되지만, 앞시간에 배웠던 position:relative;로 이동도 가능하다.

ul안에 li를 배치하는 형태 익숙해지기!

거의 모든 웹페이지 제작 시 기본 셋팅

li 안에 li생성해 세부 메뉴가 나오도록 배치

세부 메뉴는 모두 같은 속성값을 가지므로 class = lnb로 선언

gnb와 똑같은 속성을 가지므로 복사 붙여넣기.

클래스는 닷으로 시작한다.

display:block;으로 처리한다.

>안쓰고 띄어쓰기도 가능하다 : 부모-자식 표시가 아니라 손주, 조부모 모두 표시가능한 표기방법이다.

hover은 마우스를 올려뒀을 때, 적용되는 속성값이다.