렝무식

간혹 홈페이지들을 보다보면 이런 레이아웃들이 있습니다. 맥도날드 홈페이지 메인입니다.이렇게 관련된 것들이 한 줄에 나열되어있는 형태죠! 이런 것들도 마찬가지입니다.(요건 춘천시민축구단 홈페이지 갤러리입니다 ㅎ 제가 춘시축을 조아해서 ...) 아무튼 이런 레이아웃을 많이 확인할 수 있는데요!저번에 inline-block 포스팅 할 때 한 번 언급한 적이 있지만, 이런 레이아웃들은 보통 ul과 li 태그를 이용해서 만듭니다. 이번에는 저렇게 관련있는 것들을 한 줄에 배치하는 레이아웃을 예시로 복습해볼게요!저번 포스팅과 다른 점은 이미지와 텍스트가 추가 되었다는 점입니다.  이런 형태의 레이아웃입니다.사용된 이미지는 .. 제가 그냥 쉬는시간에 마우스로 그린 애들입니다.예제로 이미지를 많이 넣게될텐데 그 때 사..

어제 태그로 슬라이드 영역에 사용되는 불릿 버튼을 만드는 예제를 포스팅 했었는데요. 오늘은 이 불릿버튼을 이용해서 메인 슬라이드의 겉모습을 만드는 예제를 한 번 복습해보겠습니다! (다른 수강생 분의 홈페이지 리뉴얼 시안이라서 기업이름을 좀 지웠습니다..ㅎㅎ 어짜피 세세한 텍스트보다는 레이아웃이 중요하니까 대충 넘어갈게요.) 슬라이드 영역이 있고, 텍스트가 오른쪽에 배치되어있으며, 텍스트 영역 안에 창업문의안내로 이어지는 링크버튼이 있는 형태입니다. 그리고 아래쪽 가운데에 슬라이드 불릿 버튼이 있습니다. 이런 경우는 영역을 다음과 같이 나누는 것이 좋습니다. ✅ HTML 상생하는 기업, OOO입니다. 창업문의하기 (1) 슬라이드 이미지가 들어갈 영역 (div) (1-1) 텍스트들이 들어갈 영역 (div) ..

태그는 이름에서부터 알 수 있지만, 버튼 요소를 만드는 태그입니다. 웹페이지 제작 시 웹 접근성을 중요하게 생각하고 고려해야 하는데요. 이때 버튼 태그를 사용하면 tab키를 눌렀을 때 그 위치가 잡히게 됩니다. 이게 무슨 말이냐하면, 큐넷 홈페이지를 예시로 탭 키를 한 번 눌러볼게요. 보이는 것과 같이 검은색 테두리가 생기게 됩니다. a태그와 button 태그는 이와 같이 검은색 테두리가 생기면서 tab키로 접근할 수 있습니다. 이는 마우스를 사용하지 못하는 시각장애인분들을 위해 존재하는 기능입니다. a태그와 button태그가 이런 식으로 같은 기능을 하므로, button 태그 안에는 a 태그가 존재하면 안되며 그 반대도 성립합니다. 한마디로 하나의 태그만 사용해야 한다는 의미입니다. button태그의 ..

display 속성은 해당 요소를 어떻게 보여줄 것인지에 대해 결정할 수 있는 css 속성입니다. 보통 관련있는 것들을 나열할 때, 과 태그를 이용합니다. ul li 태그는 본래 순서가 없는 요소의 리스트를 작성할 때 사용하는 태그지만, 실제로 그러한 용도로는 잘 쓰지 않는 것이 대부분입니다. 그런데 ul li 태그는 블록 요소이기 때문에 가로로 나열되지 않고, 보통 아래로 나열됩니다. 우리가 원하는 레이아웃을을 만들기 위해서는 가로로 나열이 되어야 하는데, 이때 사용할 수 있는 방법 중 하나가 바로 display: inline-block으로 속성을 변경해주는 방법입니다. block 요소의 특징은 다음과 같습니다. 줄 바꿈 발생 너비(width)의 기본 값이 100% 높이(height)의 기본 값은 0 ..