[211222] CSS 이미지, 링크 넣기, position, 클론코딩

목차

1. 엘리먼트 안에 같은 엘리먼트를 넣기

   1-1. div

   1-2. ul, li

   1-3. inline-block의 단점

   1-4. float

2. 이미지 넣기

3. 메뉴 만들기

---

1. 엘리먼트 안에 같은 엘리먼트를 넣기

1-1. div

div 안에 로고div와 메뉴div가 들어있는 모양

원래 모든 엘리먼트는 기본적으로 여백을 어느정도 가지고있다.

처음에 시작할때 margin, padding을 0으로 놓고 시작하면 편하다.

 

코드가 실행되는 위치

• 무조건 왼쪽 상단 꼭지점부터 시작해서 생성됨.
• 같은 위치에서 생성될 경우 나중에 실행된 코드가 위에 덮어씌워진다.
• 후발 생성된 엘리먼트는 속한 엘리먼트 기준으로 생성되는 위치가 달라진다
• ex) 가운데 정렬된 1번 박스 안에 2번 박스를 생성한다. -> 가운데 정렬된 1번 박스의 왼쪽 상단 꼭지점부터 생성됨.

 

가운데 정렬

• margin: 0(상하) auto(좌우);
• 가운데 정렬이 되어야할 요소에서 실행해야함. -> (질문)여러개를 한꺼번에 정렬할때는?
• margin: auto auto; 실행이 되지 않음.

 

이상적인 웹페이지 구성사이즈

• 좌우 1024px에서 스크롤바를 감안한 1004로 작성했음
• 모니터가 커진 지금 1200px(꽉찬화면) ~ 800px(좌우여백)으로 주로 작성함. ex) 네이버
• 모니터에 따라서 가로 해상도가 달라진다. 이를 커버하기 위해서 width : 100%를 작성
• 100% : 블록의 특징처럼 한 줄을 다 쓰겠다는 선언

 

inline 속성

• 글자크기만 적용되므로 넓이와 높이 지정이 되지 않는다.
• padding은 먹히지만 의미를 제대로 알고 써야한다. 비추천.
• 최근에 생간 inline-block 속성. -> inline이지만 block처럼 크기, 높이 조절이 가능함.
• 하지만 span 속성은 잘 쓰지 않고 대신 h1을 주로 써서 해결함

 

텍스트가 넘치면 아래로 떨어짐.

• 가장 마지막 글자를 기준으로 다음 코드가 붙음. css로 수정가능
• (숙제) 텍스트에 관련한 css를 찾아보기

 

겹치는 효과를 주기

• 위치 지정 요소(position이 static 외의 다른 값인 요소)의 박스에 대해 z-index는 주어진 값에 따라 어느 위치에 쌓일지 결정한다.

See the Pen z-index by supermint (@ma_ad_shouri) on CodePen.

1) 빨간박스 / 2) 초록박스 / 3)파란박스 - 라고할때

• 1 / 2/ 3 : 이 순서로 1번이 제일 위에 올라와 있어야하지만
• 2 / 1 / 3 : 2번이 제일 위에 올라와 있고 1번, 3번이 순서대로 와있는 것을 알 수 있다.
• 이런 레이어별로 쌓는 순서를 바꾸게 하는 것이 z-index의 역할

참고사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/z-index

position이 각각 absolute / relative일때의 차이점. z-index 번호에 따라 겹쳐진 순서가 다르다.

 

 

1-2 ul, li

• 둘다  block 형태라서 아래로 떨어지는 목록을 만든다.
• display : inline-block; 으로 바꾸면 평화롭게 수평정렬이 된다.
• list-style : none; 목록 구별점을 없애줌. -> 보통 제일 상단에서 선언해줌

 

작성하지 않았는데 자동으로 들어간 padding

 

 

1-3. inline-block의 단점

padding을 없애도 어느정도 여백이 생겨서 레이아웃을 세울때는 잘 쓰지 않는다. -> 해결책 float!

 

 

1-4 float

float를 선언하면, 속성을 inline으로 바뀌며 강제로 좌측이나 우측으로 정렬함.

아래 속성이 block이라도 float가 변경한 inline 요소 옆으로 붙임! inline-block이랑 다른 특징!

먼저 자리를 잡아놓고 정렬을 진행하기때문에 순서를 바꾸려면 같이 float를 선언해야함.

코드에서 상하에 있는 엘리먼트에 모두 영향을 주고, 옆에 딱 달라붙어서 생성된다.

---

2. 이미지 넣기

<img scr="이미지 주소" alt="그림에 대한 설명">

<a href="#">링크입니다</a>

이미지를 다운 받아서 링크를 걸기

웹접근성. 그림이 잘 안보이는 사람을 위해 적는 설명

 

비트맵 속성

크기를 키워도 깨지지 않는다

용량순서 : gif < < png

gif : 배경이 투명하게 적용되지 않는다

 

벡터 속성

 

---

3. 메뉴 만들기

링크 걸기

• inline 속성인 a(앵커) 사용.
• # : 링크는 걸지만 이동을 하지 않음. 링크가 걸려있다는 표시만 낼 수 있음.
• .\sample.html : 이렇게 자기자신 페이지를 걸어놓기도 함.
• ul > li > a {} 이렇게 선택하기 : 일을 현명하고 적게 할 방법을 익혀서 사용하기

 

텍스트 css 변경

• text-decoration : none; -> 링크라는것을 표시하는 밑줄을 해제하기
• font-weight : bold; -> 텍스트의 굵기
• text-align : center; -> 텍스트 가운데 정렬

 

접근성 고려

글자가 아닌 부분을 클릭해도 넘어갈 수 있도록.

초록색 영역을 클릭해도 학교소개로 넘어간다. / 초록색 영역인 패딩값을 준 코딩

투명도

opacity : 0.7;

• 투명도를 조절할 수 있다.
• 단, 부모에게 적용하면 자식도 같이 투명해지니 잘 생각해서 사용하기

 

rgba

rgba(0, 0, 0, 0.5);

 

• 배경만 투명하게 설정 가능
• rgb 채색
• a 알파값(투명도)

  ---

클론코딩

1. 목차 파악하기

바깥에 적힌건 div의 구성도 / 안에 적힌건 div 안에 들어갈 구성도

웹사이트를 이해하기 쉽도록 박스를 바깥에 있는 순서대로 둘러싸며 체크를 해보았다.

• wrap
  • header
    • logo
    • ul
  • visual
    • img
    • visual_menu
      • ul

이런 순서대로 생각하면 어디쯤 자리를 잡을지 정해진다.

 

위 목차에 따라서 만든 코드

 

2. 목차 파악하기

그 다음부터는 의도를 작성하고, 어디에 어떤 이미지를 넣을지 메모를 해봤다.

• wrap -> 전체적인 크기를 정하기
  • header -> 차지할 크기와 위치 정하기
    • logo -> 왼쪽으로 정렬
    • ul -> 오른쪽으로 정렬
      • li -> 왼쪽으로 정렬, 메뉴 클릭하면 이동할 a 넣기
        • a -> 웹 접근성을 위해서 글자 주변 영역을 클릭해도 움직일 수 있도록 padding 넣기
  • visual -> 차지할 크기와 위치 정하기
    • img -> 차지할 크기와 위치 정하기
    • visual_menu -> img 위에 올라갈 거니까 position:relative 넣기, 크기 위치 정하기
      • ul -> 크기 위치 정하기
        • li -> a 넣기
          • a -> padding 넣기

 

3. CSS 작성하기

의도를 작성했으므로 세부적인 수치로 구체화를 시킨다. (코드가 너무 길어 접음)

예시