2020.10.21_nav tag, flex-self, img tag, select tag

2020.10.21_nav tag, flex-self, img tag, select tag

 

 

 

오늘은 기초나, 자세히 하나하나 부족했던 것들 나름대로 정리.. 개연성, 연관성 없음 주의

 

 

 

css 보단 html 태그의 요소별로 정리를 했음.. 사실 카테고리 하나 더 팔까하다가 그냥 제목에다가 몽땅 정리한거 적었다... 기초적인 것들이 나중에 또 더 정리해야할 필요 있으면 그냥 하나 더 파야지.. 

 

티스토리 css 를 클론 코딩 ( 실제 서비스 직접 하나하나 따라해보면서 구현해보는 것 ) 하면서 얻은 것들 정리 위주!

 

 

nav 요소 

- nav 는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구간.

- 자주 쓰이는 예로는 메뉴 , 목차 , 색인 ( index - 중요한 항목 등을 뽑아서 어느 쪽에 있는지 쉽게 찾아볼 수 있도록 쪽 번호와 함께 별도로 배열하여 놓은 목록 ) 이 있음.

 

>> nav 요소는 주요 탐색 링크 블록을 위한 요소 이므로, footer 요소 ( 작성자, 관련 저작권 정보, 문서의 관련 내용 등 ) 나 다른 기능을 하는 요소는 포함하지 않아도 됨.

 

nav 태그 안 요소 ( 잘못된 예 )

 

 

여기서 나는 링크를 포함하여, 글쓰기 버튼을 배치해서 nav에 불필요한 코드를 집어 넣음.

 

 

 

그래서 nav 와 button 을 분리 했음. 하지만 한 줄에 배치를 해야하는 요소라고 생각해서 나는 flex를 사용하려고, 전체를 div wrapper 로 묶어 주었다. 

 

 

근데 이렇게 하니 문제 발생..

 

 

 

 

버튼이 flex 요소가 안먹힌다...쥬륵 찾아보니 

 

<summary>, <fieldset>, <button> 및 같은 특정 html 의 요소는 브라우저 기본 렌더링 display:flex 선언과 충돌한다.

 

헣ㅎ허..그렇군 크롬에서도 안먹히면 버튼은 앞으로 flex가 사용이 잘 안된다는 것을... 

 

스택오버플로우나 다른 곳을 가서 보면,

 

버튼안의 요소들을 그래서 <span></span> 으로 감싸라고 해서 감싸봤더니

 

 

 

 

 

이 무슨 혼종이... 일단 div는 여기서 작동을 안하고 span 만 작동한다고 해서 해봤더니 똑같음...흑흑

 

 

그렇다고 div를 제거하고

 

 

이렇게 해버리면,

 

 

허헣허허..안먹어..스타일... ㅠㅠㅠㅠㅠ...

 

 

여기서 div 랑 span 차이 정리

 

div - 가로폭, 세로폭 지정가능, 자동 줄바꿈, 박스 형태로 공간 차지

 

span - 요소만큼의 넓이 먹음. 문장 중간에 들어갈 수 있음, 줄 단위로 공간 차지, 줄바꿈 X

 

 

쨋든 여기서는 이 자체가 문제가 아닌 것 같음 그래서 어떻게 해야 먹을까하다가.. 

 

새로운거 하나 발견

 

 

 

 

 

 

align-self

- 플렉스박스의 요소 중 한개의 요소만 지정할 수 있음.

  align-item 보다 우선 적용됨.

 

우선 적용이니 먹지 않을까 하고.. 하나만 줘봤음

 

 

 

후....짝짝 잘 적용이 됨... 잘되는균.. 다행이다..ㅎㅁㅎ... 아무래도 padding으로 주는 것 보다는 반응형이나 정렬자체를 가운데 하는거라 좀 더 정렬해보려고 찾았는데 다행히 이 속성은 적용이 잘된다.

 

---

 

 

다음은 img 태그 속성들로 정리 해보겠슴메

 

 

img alt, title 속성 정리정리

 

img 는 스스로 닫는 형태의 인라인 요소라는 것도 한번 짚고 넘어가기.

 

 

 

 

이미지 주소가 잘못되었을 때 나타나는 alt 속성

 

alt

Alternate 의 줄임말. 이미지의 대안을 나타냄. 이미지는 외부의 주소에서 가져오기 때문에, 주소가 잘못되거나 서버에 문제가 있다면 이미지를 불러오지 못하는 경우가 있다. 

이때 사용하는 것이 alt 속성으로 해당 이미지를 대체하여 나타내는 기능이다.

그래서 이미지가 제대로 뜨면 문제가 없지만, 문제는 시각장애인분들과 같이 이미지를 못보는 분들에게서는 더욱 이 속성이 중요하게 작용한다. 그렇기 때문에 img에는 alt 속성이 필수적이다. 

이 alt 속성은 스크린리더에서 작용하는데, 스크린리더는 이 속성을 읽어주고, 이미지를 제대로 이해하지 못하는 검색엔젠 또한 이 이미지를 읽을때 alt 속성으로 받아들이기 때문에 또한 필수적이다.

 

 

 

 

alt 속성은 해당 이미지를 묘사하는 내용이 들어가야하며, 150자 이내여야한다.

 

아이콘과 같이 아무 의미가 없는 이미지에는 오히려 alt="" 으로 비워두는 것이 좋다. 속성 자체를 표기하지 않는 것은 비표준이다.

 

이미지에 대한 텍스트와, 이미지 자체의 링크가 각각 달리 묶이는 경우에는 어쩔수없이 이미지에 텍스트와 똑같은 설명을 alt 속성에 적어주는 것이 그나마 낫지만 그런 경우는 되도록 피한다.

 

 

 

 

 

title 

마우스를 가져다 대었을 때, 나타나는 말그대로 이미지의 제목. 웹페이지를 읽는 사람들에게 이미지에 대한 정보를 좀 더 제공하기 위한 것이며, 이미지 이외에 다른 웹페이지를 링크할 때에도 쓰임. 모든 사람이 읽을 수 있기 때문에 정확한 키워드가 필요

 

 

3~5개의 단어로 구성되어야 함. 

 

짧으면서 유익해야 함.

 

 

 

++ width, height 속성

 

 

 

width, height

 

이미지의 너비와 높이를 지정하는 속성. 이 속성이 없을 경우에는 이미지의 원래의 크기로 웹페이지에 나타냄. 

페이지 로딩시 이 속성이 없다면, 이미지를 로딩 시에는 매우 작게 있다가 , 이미지가 받아졌을 때 해당 크기만큼 늘어나게 됨. 예로 페이지가 로딩 될 때 페이지가 열리면서 스크롤 바 크기가 점점 작아지면서 페이지 세로 길이가 늘어나는 현상이 이러한 이유 때문

 

 

간단한 태그들에도 많은 것들이 담겨있구먼... 헣헣 이렇게 정리하고 alt는 필수 속성!!! 꼭꼭 이미지 마다 추가해주기.

 

---

 

다음은 나는 아직 자바스크립트를 못ㅎ... ( 올해 안에 시작 꼭 ㅈㅂㅈㅂㅈㅂㅈㅂ )

 

그래서 드롭다운을 html select으로 구현쓰

 

 

 

select 

사용자가 폼에서 선택할 수 있는 옵션의 목록을 보여주는 폼 요소

옵션을 모두 숨겨서 선택된 한 가지만 보여줌. 

여러 개 선택도 가능.

 

 

label 과 연결하여 접근성을 높이기 위해 id를 사용하고

name 은 폼태그이기 때문에 나중에 데이터 전송할 이름을 정해줌

 

모든 옵션은 자신이 선택 되었을 때 값으로 value가 필수로 필요하지만, 지정하지 않으면 자기 안의 텍스트를 값으로 사용한다.

 

 

 

여러개 선택시 multiple을 사용해서 여러 개를 선택할 수 있게 함.

 

 

 

 

 

 

그럼 이렇게 뜨면서 컨트롤 또는 쉬프트, 드래그 등으로 멀티로 선택 가눙가눙 또한 size 옵션으로 한번에 몇개를 보여줄지도 가능하다.

 

 

 

 

 

 

 

이 부분은 맨 처음 값을 아무것도 선택되지 않는 벨류에서 띄워준다. 쇼핑몰에서 본거랑 비슷하구망

 

 

 

 

하지만 나는 처음부터 제목이라는 벨류를 띄워주고 싶기 때문에

 

 

 

이렇게 selected 옵션을 주어서 

 

 

 

 

 

이렇게 제목이 뜨게 해주었다! 짝짝 

 

 

 

 

이런식으로 잘 드롭다운 되는군 밑줄은 내가 hover 로 넣어줬음 !

 

 

 

 

---

 

 

오늘은 html 쪽으로 거의 적은거 같은데.. 후 하나하나 정말 디테일하게 열심히 공부해야겠다..! 

오늘 포스팅 끝끝