반응형 HTML&CSS HTML&CSS 2021. 10. 25. HTML 페이지에 자바스크립트 코드와 링크를 넣는 위치 선정과 실행 순서의 이해 HTML 페이지 안에 자바스크립트 코드는 아무 위치에나 올 수 있습니다. 심지어는 태그 바깥에도 위치할 수 있습니다. HTML 페이지 안에 자바스크립트 코드를 넣을 때는 "" 태그를 사용합니다. ""로 연결을 하는 방법 두 가지가 있습니다. 두 가지 방법 모두 자바스크립트 코드를 실행하는 정상적인 방법입니다. 우리가 보는 유명 사이트들은 모두 태그 안에 자바스크립트 코드 태그가 위치합니다. 기본적으로 자바스크립트 코드는 모두 안에 자바스크립트 태그를 넣으면 웹 브라우저는 이 자바스크립트 태그의 코드, 또는 링크한 파일(들)을 모두 읽어서 실행한 후 가 다음 태그의 내용을 읽기 시작합니다. 웹 브라우저가 자바스크립트 코드 실행 완료 시점까지 파싱을 멈추고 기다리는 이유는 자바스크립트 코드로 HTML 태그를.. HTML&CSS 2021. 10. 22. <input type="button">, <button>, <button type="button"> 의 차이 3가지 태그는 모두 버튼의 기능을 하는 태그들입니다. 가장 먼저 사용된 버튼 표현 방식이 입니다. 초창기에는 대부분의 폼 요소들을 으로 구현했고, 이후 여러 가지 폼 요소들이 추가되었습니다. 그중의 하나가 버튼의 기능을 하도록 고안된 태그입니다. 태그보다 나중에 나왔고, 보다 범용으로 사용할 수 있도록 고안되었기 때문에 태그는 태그보다 다양한 표현 기능을 지원합니다. 끝나는 태그가 있기 때문에 "" 태그 쌍 사이에 라벨 텍스트, 이미지, 하위 태그 등 다양한 태그를 넣어서 버튼을 꾸밀 수 있습니다. 그럼에도 불구하고 여전히 ""이 더 많이 사용되고 있습니다. 오래전부터 사용되어 왔고, 사실 CSS로 버튼의 디자인을 커스터마이징 하면 이나 이나 모두 동일한 수준의 버튼 디자인을 만들 수 있습니다. 그리고 .. HTML&CSS 2021. 10. 21. 셀렉트 박스(<select>)에 플레이스 홀더(placeholder) 기능 추가하기 요소에 있는 플레이스홀더 기능은 입력 필드에 입력해야 하는 내용에 대한 가이드를 제공해주는 중요한 기능을 합니다. 이용자의 입력 실수를 방지해 줄 수 있기 때문에 웹폼을 작성할 때는 필수로 사용해야 하는 속성입니다. 셀렉트 박스()에는 플레이스 홀더 기능이 없습니다. 그래서 플레이스 홀더 비슷한 기능을 하는 편법을 이용해 구현합니다. 편법이지만 실제 플레이스 홀더처럼 동작하기 때문에 이질감 없이 사용할 수 있는 장점이 있습니다. 일반적인 셀렉트 박스로 만든 목록은 다음과 같습니다. 선택 가능한 옵션 항목들이 목록으로 표시되고, 첫 번째 옵션 항목이 선택되어 대표 항목으로 보입니다. 아반테 쏘나타 싼타페 그렌져 이 셀렉트 박스에 플레이스 홀더 기능을 만들어 붙여 보겠습니다. 먼저 기본 셀렉트 박스에 플레이.. HTML&CSS 2021. 10. 19. 인접한 이미지와 텍스트를 나란히 수직 가운데로 정렬하는 방법 문단 안에 이미지와 텍스트를 함께 배치한 경우 텍스트의 베이스라인을 기준으로 이미지 하단 모서리가 정렬됩니다. 문단은 텍스트의 베이스 라인을 기준으로 모든 컨텐츠가 정렬되는 것이 기본이기 때문에 당연한 거지만, 이미지가 텍스트보다 현저히 커지거나 텍스트가 여러 줄이 되면 정렬 문제가 발생합니다. 블록 안에 이미지와 텍스트를 나란히 배치해서 컨텐츠 블록을 구성할 때 이미지 크기가 커지면 다음처럼 레이아웃 정렬이 맞지 않게 됩니다. 이미지와 텍스트를 수직 정렬을 가운데로 맞추면 더 보기 좋은 배치를 보여주기 때문에 가운데 수직 방향으로 가운데 정렬을 맞춰보겠습니다. CSS로 다음과 같이 박스 하위 요소들 전체에 수직 정렬 속성을 추가합니다. .content *{ vertical-align: middle; }.. HTML&CSS 2021. 10. 18. HTML5에서 달라진 ID 이름 작성 규칙 ID 이름을 작성하는 규칙은 HTML5에서 꽤나 많이 달라졌지만, 아직 대부분은 HTML4 이름 규칙을 사용합니다. 대부분은 몰라서 HTML4 이름 규칙을 사용합니다. 또는 알아도 안전한 이름 작성 규칙을 유지하기 위해서입니다. 그보다는 알더라도 가독성이 떨어져서 사용하기가 껄끄럽기 때문입니다. HTML4의 ID 이름 작성 규칙은 첫 글자는 알파벳으로 시작해야 하고, 그 뒤에는 알파벳, 숫자, -(하이픈),_(언더스코어) ,.(마침표) ,:(콜론)이 아무거나 올 수 있습니다. 특수문자는 사용할 수 없습니다. 가장 큰 제약 사항으로 인식된 것은 숫자를 첫 글자로 사용할 수 없는 것입니다. HTML5에서 달라진 ID 이름 작성 규칙은 HTML4의 제약이 없어진 것입니다. 유일하게 남은 제약이 문자 1개 이상.. HTML&CSS 2021. 10. 15. <br> , <br/>, <br /> 어떤게 맞는 것인가? 웹의 표준이 계속 바뀌면서 문제가 된 것이 구 태그 사용 방법에 대한 혼동입니다. 바뀐 지 오래되었지만, 오래된 HTML 문서들에 사용된 구 버전 사용 방법들을 따라 계속 사용하면서 불필요한 사용 방법을 계속 고수합니다. 달라진 표준에 대한 문서를 볼 기회가 없는 것도 한 가지 원인이기는 합니다. 가장 흔한 혼동이 혼동입니다. 결론부터 말하면 현재 표준은 입니다. "/"를 붙일 필요도 없고 "/" 앞에 공백을 띄울 필요도 없습니다. 모던 웹 브라우저들은 , 을 사용한 HTML 문서를 파싱 하면서 모두 로 변경합니다. 문제뿐만 아니라 과거 단독 태그라는 것을 표기하기 위해 태그 끝에 "/"붙였던 방법은 모두 "/"가 없는 방법으로 변경되었습니다. , , 태그들도 모두 마찬가지입니다. 앞서 설명한 대로 이런.. HTML&CSS 2021. 10. 13. CSS scroll-snap-type 속성으로 자동부착 스크롤 슬라이드 만들기 scroll-snap-type과 scroll-snap-align 속성 중 일부 속성을 사용하면, 스크롤 바로 스크롤을 할 때 자동으로 다음 요소로 애니메이션 되어 이동하면서 달라붙는 효과를 부여할 수 있습니다. 스크롤바를 이동한 만큼만 하위 요소들이 이동하는 것이 아니라, 페이지를 이동하는 것처럼 다음 하위 요소 영역이 애니메이션 되어 이동해서 표시 영역을 채웁니다. 기능적인 한계가 있다보니 광범위하게 사용할 수는 없지만, 여러 개의 요소들을 스크롤 바로 이동하면서 페이지 단위로 이동하는 것처럼 요소들을 이동시키는 효과를 만들 때 유용합니다. 글 끝에 완성된 소스코드가 있으므로 다운로드해서 확인해볼 수 있습니다. 스크롤바의 빈 영역을 클릭하거나, 스크롤바를 드래그해서 이동하거나, 키보드 좌우 화살표 키(.. HTML&CSS 2021. 10. 12. URL이 없는 하이퍼링크(<a>)에 "#"과 "void(0)"을 사용하는 이유와 차이점 아무것도 입력하지 않은 하이퍼링크를 클릭하면 현재 페이지의 갱신이 일어납니다. 아무것도 입력하지 않은 하이퍼링크는 현재 페이지 URL이 있는 것과 같은 것으로 처리가 됩니다. 웹페이지 제작을 할 때 하이퍼링크는 다른 페이지로 이동하는 페이지 링크 용도 외에도 여러 가지로 사용됩니다. 페이지 갱신이 일어나지 않도록 하려면 하이퍼링크 URL에 뭔가를 입력해서 페이지 페이지 이동을 막아야 합니다. 하이퍼링크에서 페이지 이동을 막는 막는 방법은 다음 2가지가 있습니다. 하이퍼링크 하이퍼링크 두 가지 모두 하이퍼링크를 클릭해도 페이지 갱신이 일어나지 않도록 합니다. 하지만 둘은 실제로는 많은 차이가 있으므로 경우에 따라 선택적으로 사용해야 합니다. "#" "#"의 정확한 용도는 페이지 안에 있는 ID가 있는 요소.. 이전 1 2 3 4 5 ··· 23 다음 반응형
