렝무식

인터넷과 브라우저라는 개념이 세상에 나온 것은 그리 먼 과거가 아닙니다. 그리고 더더욱이 스마트폰과 태블릿이 나온 건 거의 최근이라고 봐도 무방하죠.. ㅎㅎ 핸드폰이 없던 시절을 살던 사람과, 스마트폰이 없는게 이상한 세대의 아이들이 한 집에 살고있으니까요 잠깐 딴 소리 한 번 하자면, 요즘 가정에서는 부모님의 핸드폰 뒷자리가 다른 경우가 많다구합니다.. 저만해도 가족들 뒷자리가 모두 동일한데 말이죠!! 그 이유는 저희 부모님 세대는 핸드폰이 없던 세대라서 모두 결혼 하신 후에 핸드폰을 개통했기 때문에 뒷자리가 같은 반면에, 요즘 결혼하신 분들은 모두 본인 가정에서 핸드폰을 개통하고 나서 만나신 분들이라 부모님의 핸드폰 번호 뒷자리가 다르다는 거예요 ㅋㅋ ㅠㅠ 저는 가족이면 당연히 뒷자리가 다 같은거아니..

간혹 홈페이지들을 보다보면 이런 레이아웃들이 있습니다. 맥도날드 홈페이지 메인입니다.이렇게 관련된 것들이 한 줄에 나열되어있는 형태죠! 이런 것들도 마찬가지입니다.(요건 춘천시민축구단 홈페이지 갤러리입니다 ㅎ 제가 춘시축을 조아해서 ...) 아무튼 이런 레이아웃을 많이 확인할 수 있는데요!저번에 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 ..

http://wlals00.dothome.co.kr/ 방지민 포트폴리오 wlals00.dothome.co.kr 다짜고짜 주소부터 올리기 제가 맥도날드 홈페이지를 고른이유는 .. 그냥 친구가 맥도날드 홈페이지 리뉴얼 해봤으면 좋겠다고 해서! 입니다. 별 이유는 없음 그런데 제가 리뉴얼 디자인 시안을 포토샵으로 만들었을 때에는 웹페이지를 구성하는 dhtml 요소들을 거의 안 배운 상태였어서, 좀 현실적으로 불가능한 디자인들이 있습니다. 그래서 컨셉서 디자인이랑 실제로 만든 작업물이 쪼금 달라졌어요. ㅎㅎ 그리고 만들면서 진심 햄버거 먹고 싶었음 컨셉서 타이틀 만들고 "찢었따 .." 라고 생각함. 그런데 저는 개인적으로.. 저 스스로가 디자인에 대한 감각이 매우 매우 매우 구린 편이라고 생각합니다. 그래서 이..

코딩에 손을 놓으면서 자연스럽게 깃에도 손을 놓게 되어서 (+ 게다가 노트북이 한 번 망가져서 전부 초기화가 됨..) 깃에 대한 지식이 거의 초기 수준으로 돌아감.. ㅋㅋ 1. 그냥 깃허브 레포에 코드를 남겨둘 용도 2. 학원에서 작업하고 바로 깃으로 업로드 하려고 3. 깃 사용법좀 손에 익히려고 ... 등등 여러가지 이유로 몇 달동안 썩고 있던 깃허브 계정의 먼지를 털어냈어요. 진작했어야 했는데.. (정말 처음 레포만드는 것 부터 시작해서 로컬 폴더 연결하는 것 까지 하나도 기억이 안나서 다시 찾아보고 올림) 협업하는 것도 아니고, 뭔가 보여주기 위한 용도도 아니기 때문에 포트폴리오 저장소라고 생각하고, 두 개의 작업물을 한 꺼번에 한 개의 레포지토리에 업로드했습니다. 긴 말 없이 바로 시작~.. ✅ ..