본문 바로가기

개발자 꿈나무/html7

클래스(class)와 아이디(id)의 차이점 html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능하다. 클래스(class)와 아이디(id)는 얼핏 보기엔 똑같은 기능을 하는 것 같지만, 알고 보면 이 둘은 큰 차이점을 가지고 있다. 이름을 불러오는 방식 클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다. 김영희 중복 사용 여부 클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 김영희 박철수 .. 2021. 7. 15.
<b>와 <strong>, <i>와 <em>의 차이 태그와 태그는 웹페이지에서 확인할 때는 똑같이 볼드체로 보인다. 태그와 태그도 마찬가지로 동일하게 이탤릭체로 표기된다. 하지만 이 태그들은 시각적으로는 똑같아 보일지 몰라도, 알고 보면 각각 다른 의미를 가지고 있다. 와 차이점 태그는 bold의 약자로 특정 텍스트에 주의를 끌기 위해 글씨가 굵게 표시된다. 단순 시각적 요소로 사용되며, 주변의 컨텐츠와 비교했을 때 더 중요하다는 의미는 아니다. 하지만 와 달리 태그는 '매우 중요, 긴급, 경고'의 의미를 가지고 있다. 와 의 차이점 태그는 italic의 약자로 기울임꼴로 표시된다. 기술 용어, 외국어 구절, 등장인물의 생각 등 특정 이유로 주위와 구분을 해야 할 때 사용한다. 은 주위 텍스트와 비교했을 때 해당 부분을 강조하고 싶은 경우에 사용한다. 단.. 2021. 7. 8.
버튼 <button>에 onclick 링크걸기 버튼을 구현할 때 안에 태그를 사용하면 일부 브라우저에서 클릭이 되지 않는 문제가 있다. 이러한 경우 태그가 태그를 감싸는 형태로 순서를 바꾸어 사용해도 되지만 자바스크립트의 onclick 을 이용하여 구현하는 간단한 방법도 있다. 버튼내용 버튼내용 현재 페이지에서 이동 혹은 새 창으로 이동하는 버튼을 만들고 싶을 때 위의 코드에 링크 주소만 바꾸어 사용하면 된다. 2021. 4. 7.
이미지 태그 <img>의 alt와 title 속성 일반적으로 이미지 태그는 아래와 같이 사용한다. baby.jpg 라는 파일명의 이미지 파일을 불러온 것이다. 그런데 이러한 이미지 태그 에 alt나 title 속성을 사용한 것을 볼 수 있다. 이 속성들은 각각 무엇이고 어떤 상황에 사용해야 할까? alt의 의미와 사용 이미지 태그의 alt 속성은 해당 경로에 이미지가 없거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트이다. 대체 텍스트이므로 당연히 이미지의 내용을 대체할 수 있는 이미지 설명이어야 하며, 텍스트가 포함된 이미지의 경우 반드시 해당 텍스트를 함께 적어주는 것이 좋다. 시각장애인들은 alt의 내용을 리더기로 듣게 되는데, 현재 국가지침으로 정해져 있는 alt 텍스트의 글자수 제한은 없으나 통상 200~250자 정도까지를 권장하고 있다. (그 .. 2020. 10. 28.
html 문서 주석 처리하기 <!--주석--> html 문서를 작성할 때, 해당 코드에 대한 추가 설명을 넣고 싶을 때가 있는데 이럴 때 주석(comment)을 사용한다. 주석은 웹 브라우저의 페이지 소스 보기 등을 통해서는 확인이 가능하지만 웹 페이지 내에는 나타나지 않는다. 주석(comment)은 해당 코드에 대한 추가 설명이나 디버깅을 위해 작성한 구문을 의미한다. 주석은 로 마무리한다. (느낌표 유무 차이) 주석은 한줄에도, 여러 줄에도 모두 적용이 가능하여 활용도가 높다. [TIP] 주석을 중첩으로 인식하지는 못하므로, 주석 안에 또 다른 주석을 사용해서는 안 된다. 2020. 9. 30.
앵커(anchor) 만들어서 페이지 내 위치 이동시키기 앵커라는 단어는 많이 들어보았을 것이다. 앵커(anchor)의 사전적 의미는 '배의 닻'을 의미하며, 웹상의 html 페이지에서는 어떤 대상의 시작 지점을 알리는 의미로 쓰이기도 한다. 페이지의 내용이 많아 스크롤이 너무 길 때, 원하는 컨텐츠를 쉽게 찾을 수 없을 때 - 앵커 태그(anchor tag)를 이용하여 편리하게 이동할 수 있다. 아래의 이미지와 같이 section1~4로 이루어진 페이지가 있다고 가정해보자. 페이지의 상단 부분에 버튼 4개를 만들어서 클릭 시에 해당 섹션으로 바로 이동하게 한다면 방문객들이 훨씬 쉽고 편리하게 컨텐츠를 이용할 수 있을 것이다. 앵커 태그는 각 섹션의 시작 지점에 아이디값을 설정하고, a 태그를 이용하여 링크를 아이디값으로 지정해 주면 된다. 예시로 div에 아.. 2020. 9. 27.
줄바꿈태그 <br>과 <br/>의 차이 "안녕? 친구하지 않을래" 라는 텍스트를 표시하고 싶어서 html 파일을 만들고 아래와 같이 썼다. 태그를 이용하여 텍스트를 감싸 주었다. 는 paragraph의 약자로 '문단'을 의미한다. 에디터(왼쪽)에서 엔터를 쳐서 줄바꿈을 하더라도 미리보기 페이지(오른쪽)에서는 줄바꿈이 적용되지 않는다. 가 문단이라는 의미이니 이를 응용하여 태그를 두 번 사용하면 줄바꿈 효과를 낼 수 있다. 하지만 문단이므로 사이 간격이 벌어진 것을 확인할 수 있다. 우리는 이럴 때 태그를 사용하여 아래와 같이 간단하게 줄바꿈을 할 수 있다. 은 break의 약자이며 열고 닫는 태그가 존재하지 않아서 만 써주어도 된다. 간혹 이나 이 보이는데 문법상 차이가 거의 없다고 보아도 무방하다. HTML5 : 을 사용하며, 또는 과도 혼.. 2020. 9. 14.