24년 08월 22일

오전

체크박스

체크박스를 만들어주는 속성

<label for="opt-in">이메일 수신 동의</label>
<input type="checkbox" id="opt-in">
//id를 지정해서 속성을 주도록 자주 사용한다.

css style 에서 선택자

input[type=’checkbox’]{

}

a 태그

a:hover{ //a태그에 마우스 커서를 갔다 댔을 때

a:active{ //a태그를 클릭(active)했을 때

a:visited{ //a태그를 한번이라도 사용(클릭)하고 났을 경우.

---

position **(중요)

position : box의 위치를 지정할 때 사용하는 속성

---

static(Default) :

box요소가 문서 흐름에 따라 배치(순차적)

relative :

box요소가 문서 흐름에 따라 배치(순차적)

요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.

absolute :

• 상위 box요소롤 기준으로 위치 지정가능
• 상위 box요소가 position 설정이 돼있어야 기준으로 지정됨
• 상위 box요소가 position 설정이 안 돼있으면 viewport를 기준으로 위치 조정 가능

position 이 absolute 일 때는 위에 있는 realative가 있는 선택자를 기준으로 움직인다 !

---

예를 들어

      .par {
        width: 500px;
        background-color: orange;
        position: relative;
      }
       .son:nth-child(1){
        position:absolute;
        left:100px;
        top:20px;
      }
      .son:nth-child(2){
        position:absolute;
        left:20px;    /* 부모를 기준, 왼쪽에서 20px*/
      }
      
      
      //이런식으로 par class의 position이 relative로 되어있을 때  
      밑에 선택자들에서 position:absolute를 지정해준다면
      기준이 par class가 되기 때문에 위치를 움직여도 
      par class를 위치기준으로 잡고 움직이게 된다.
 

---

fixed :

viewprot를 기준으로 위치조정 가능 . scroll event 와 무관하게 고정위치 선점 (스크롤을 아무데나 해도 항상 자기 위치를 유지한다는 뜻)

fixed 도 자주 사용할만한게 웹페이지들을 보면 메뉴바 같은게 스크롤을 내려도 그대로 같이 내려오는 경우를 볼 수 있는데, 이때 지정되어 있는게 position:fixed 이다.

sticky :

• 스크롤 영역을 기준으로 배치 , 스크롤 위치를 따라가다가 일정위치를 넘어서면 고정
• 부모요소의 기준에서 적용된다.
• 부모태그에 무조건 height 높이를 가지고 있어야 한다.
• 부모요소중에 overflow:hidden,auto,scroll 속성이 있다면 적용이 안된다.

sticky는 사진으로 예를 보여주겠다.

제일 오른쪽이 sticky 속성

 

여기서 스크롤을 내려보면 sticky 박스가 파란 div박스아래 끝까지 내려오다 박스보다 밑으로 화면이 내려가면 더이상 같이 따라 내려오지 않는다.

---

z-index

z-index는 요소의 우선순위를 지정해주는 속성이다.

특징으로는

1. z-index는 position 속성이 relative 일때, absolute일때 동작합니다
2. 기본 값은 auto 입니다 음수, 양수 숫자 사용이 가능합니다
3. z-index의 값의 숫자가 높으면 높을수록 최상단에 배치되며 낮으면 낮을수록 멀리 배치됩니다
4. z-index는 동일 선상에 있는 태그값을 확인하게 되지만 부모 태그의 z-index를 우선시하기 때문에 자식태그의 z-index값이 높더라도

부모태그 값을 더 우선시 하게 됩니다.

1. 순서 값이 없을 경우 코드 순서에 따라 쌓이게 됩니다

z-index 가 안되면 포지셔닝이 안된거임

---

hover

마우스 커서를 갔다 댔을 때 나오는 효과 지정

예를 들어

      .wrapper>header>nav>.mainmenu>li>.submenu{
        display: none;
        position: absolute;
        width:100%;
        left:0;
        top:40px;
      }  //이렇게 display가 none으로 지정되어서 객체가 보이지 않게 했을 때

      .wrapper>header>nav>.mainmenu>li:hover .submenu{
        display: block;
      }
      // 마우스 커서를 갔다 댔을 때 display를 block 으로 지정함으로써
      요소들이 다시 나타나게 만들어준다.

 

---

nth-child

부모 태그안의 자식 요소들을 직접 지정해줄 수 있는 선택자

        :first-child : 첫번째 요소
        :last-child : 마지막 요소
        :nth-child(n) : n번째 요소

      ul>li:nth-child(odd) a{
        color:red;
      }
      ul>li:nth-child(even) a{
        color:palevioletred;
      }    
      // odd : 홀수
        even : 짝수

line height

글자간의 간격

line-height는 line-box의 높이를 설정하는 CSS 속성이다.

일반적으로 텍스트 줄 사이의 거리를 설정하는데 사용된다.

---

css 선택자를 지정할 때는 선택자 선택범위를 정확히 지정해줘야 한다

안그러면 자기가 원하지 않는 다른 요소들도 같이 선택되어버리기 때문에 정확한 범위를 지정해주는게 중요함.

---

오전시간엔 어느정도 진도를 나간 후에 계속 웹페이지의 메뉴바를 만드는 실습을 했다.

예전에 독학으로 인강을 들을 때는 전혀 와닿지 않았는데 확실히 다시 한번 들으니까

그래도 그때 생각이 조금 나면서 이게 이런 뜻이었구나 하며 이해가 좀 더 잘된 부분이 있었다.

확실히 과정이 있었다면 결과도 남긴 남는 법이구나.

 

오후도 계속 메뉴 만들기를 했다만 수업이 다 끝나고 생각해보니 조금 아쉬운점이 있던게

만들어보기를 할 때 그냥 구조에 대해서 이해하려고 하면서 전체적으로 구조를 만들어보는게 중요한데 자꾸 디테일한 부분에 신경이 쓰이게 돼서 전체적인 구조는 만들어보지도 못하고 자꾸 지금 당장엔 중요하지도 않은 디테일한 디자인이나 기능에 신경을 쓰다가 1시간 2시간이 훌쩍 지나가버렸다.

 

그러니까 어제도 말했듯이 이런게 있다하고 넘어가야지(지금은) 전부 이해하려고 하면 안된다.

못따라간다.

우선 순위를 잘 정하자 !

 

css 로도 부드러운 화면 효과 지정할 수 있음 (이건 내일 쓰기!)