'HTML' 태그의 글 목록 (5 Page)

[html] a태그를 이용한 스크롤다운

안녕하세요. 플입니다. 오늘은 a태그를 이용해 스크롤 다운을 해볼게요. 1. 스크롤다운 스크롤 다운이라는 것은 간단히 말해 상단에서 특정 메뉴를 눌렀을 때 그 메뉴가 있는 곳으로 스크롤이 이동하는 것을 말합니다. 보통 세로로 긴 홈페이지에 많이 사용해요. 그리고 보통은 jQuery로 적용해주지만 오늘은 a태그를 이용해서 스크롤다운 기능을 만들어볼 거예요. 2. id 넣기 스크롤을 멈추게 하고 싶은 영역에 id를 만들어줍니다. class가 있더라도 추가로 넣어주셔도 상관없어요. class는 적용이 안되기 때문에 id로 꼭 넣어주셔야 합니다. 3. a태그에 적용 메뉴로 돌아와 a태그 href 부분에 #+id명을 적어줍니다. 그러면 끝입니다. 간단하죠? jQuery는 엄청 오래 걸리는데.. ㅠㅠ 다만 jQue..

coding/html + css · 2020. 5. 1. 07:30

[html] figure 활용하기

안녕하세요. 플입니다. 태그를 활용해볼게요. 1. figure 는 보통 이미지, 영상 등을 올릴 때 사용하는 태그예요. 태그랑은 다르게 설명을 넣을 때 주로 사용하죠. 설명을 넣을 때는 태그를 사용해요. 20.01.27 포그 귀엽다. 로그원 보자. 코드를 보면 크게 태그로 감싸주고 안쪽에 태그와 태그를 사용한 걸 알 수 있어요. 태그는 html5에 추가된 태그인데요. 조금 더 구체적으로 그룹 지을 수 있는 태그들이 많이 나오는 것 같아요. 이 전에는 나 태그를 많이 사용해 유지보수가 어려웠다면, html5에서는 다른 태그들이 많이 나와서 유지보수가 수월해지고 있다고 느껴요. 태그에 비해 태그를 사용하면 아, 여기에는 이미지가 있겠구나 하고 한 번에 알 수 있으니까요. 자식 태그를 한 번 더 체크하지 않아..

coding/html + css · 2020. 3. 27. 07:30

[new pen] 온라인 코딩

안녕하세요. 플입니다. 온라인에서 코딩할 수 있는 사이트를 알려드릴게요. 1. new pen 바로 new pen 사이트입니다. 구글에 new pen이라고 검색하면 바로 사이트에 접속할 수 있어요. https://codepen.io/NikitaDX/pen/RKLXgG New Pen ... codepen.io 들어가기 편하게 링크를 남겨둘게요. 2. 시작하기 처음 들어오면 화면이 3단으로 분리되어 html css js 세 가지를 코딩할 수 있어요. 지금은 기본으로 쓰여있는 코드예요. 모두 깔끔하게 지우고 사용하면 됩니다. 온라인으로 코딩해도 어렵지 않죠? 3. 코딩하기 코딩은 그냥 원하는 코딩을 하면 된답니다. 예시로 조금만 적어봤어요. 저장을 안 해도 알아서 반영해줍니다. 똑똑한 친구야. 아래 미리 보기 ..

coding/editor · 2020. 2. 24. 07:30

[html] id / class 구분

안녕하세요. 플입니다. id와 class 속성은 어떤 점이 다를까요? 1. id id 속성은 identifier의 약자인데 '식별자'라는 뜻입니다. 식별을 위해서는 동일한 이름이 여러 개가 있으면 안 되겠죠. 그래서 id는 동일 이름이 한 html문서당 한 개만 사용하는 것을 권장합니다. 똑같은 이름을 여러 번 쓴다고 오류가 나는 것은 아니지만 나중에 본인이 짠 코드를 보기 어려워질 수 있습니다. 보통은 header와 footer에 id를 주로 쓰고 경우에 따라서 container에도 id값을 주기도 합니다. 2. class class는 id 이외의 요소에 스타일을 주고 싶을 때 주로 사용합니다. 예를 들어 gnb 같은 부분이 있겠죠. 또 선택자로 잡기 힘든 여러 군데 퍼져있는 요소에 동일한 스타일을 줄..

coding/html + css · 2020. 2. 12. 07:30

[html] 뷰포트 설정하기

안녕하세요. 플입니다. 오늘은 뷰포트를 설정해보겠습니다. 1. 뷰포트(viewport) 뷰포트는 모바일 화면을 위해 꼭 필요한 태그입니다. 뷰포트를 설정 안 했을 때 화면입니다. 뷰포트를 설정했을 때 화면입니다. 어떤 차이가 있는지 확실히 느껴지시죠? 2. 뷰포트 설정 위에도 같은 코드를 적었는데요 이 메타태그를 태그 안에 넣어주시면 설정 완료입니다. 저렇게 메타태그를 넣어줍니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 23. 07:30

HTML 32