'웹 언어 배우기' 카테고리의 글 목록 (2 Page)

웹 언어 배우기 (44)

css를 이용해서 hover dropdown 메뉴 만들기

웹 언어 배우기/CSS 다한(dahan) 2019. 9. 29. 07:30

자바스크립트를 사용하지 않고 css를 이용해서 버튼에 갖다대면 서브 메뉴가 나오는 dropdown 메뉴를 만들어보겠습니다. dropdown 메뉴 만들기 See the Pen hover dropdown menu by Cho-YoungHo (@choyoungho-web) on CodePen. 버튼에 초록색 배경에 하얀색 글자를 적용했고 버튼 선을 없앴습니다. 또한 마우스를 버튼에 갖다대면 #3e8e41의 배경색이 적용됩니다. dropdown 클래스에 인라인 블록 요소를 줘서 버튼에 갖다대면 서브메뉴가 나오도록 했습니다. 만약 inline-block을 주지 않으면 button에 위치한 너비가 100%가 되어 버튼 바깥쪽에 갖다대도 서브메뉴가 나옵니다. 서브메뉴는 기본적으로 나오지 않게 하고 마우스가 버튼에 갖..

HTML의 블록요소와 인라인 요소 특징

웹 언어 배우기/HTML 다한(dahan) 2019. 9. 28. 07:00

HTML 태그는 기본적으로 블록 요소와 인라인 요소로 나누어져 있습니다. 이것의 차이점과 특징을 모른다면 CSS를 써먹는 데 있어서 큰 고비가 닥쳐올 것입니다. 가장 기본이 되기 때문에 충분히 이해해야 합니다. 블록 요소 HTML 태그에서 블록 요소는 div, h1, p 태그 등이 있으며 사용 가능한 최대 가로 너비를 사용합니다. 아래 예제를 보면 간단하게 이해할 수 있습니다. See the Pen 블록 요소 by Cho-YoungHo (@choyoungho-web) on CodePen. 위 예제를 통해 크기를 지정할 수 있다는 사실을 알았습니다. 또한, 크기를 지정하지 않으면 width값 auto, height값 auto로 설정되어 있습니다. 블록 요소의 또 다른 특징으로는 수직으로 쌓입니다. 이 말은..

검색엔진에 도움이 되는 meta 태그 사용 방법

웹 언어 배우기/HTML 다한(dahan) 2019. 9. 25. 07:00

meta 태그는 문서 그 자체를 설명하는 태그로 키워드, 설명, 웹 페이지를 제작한 사람 등을 설정할 수 있습니다. 그중 가장 많이 쓰는 meta 태그 위주로 알아보겠습니다. meta 태그 웹 페이지에서 대표하는 키워드를 쉼표를 통해서 나열하는 메타 태그입니다. 웹 페이지에 대한 설명을 설정할 수 있는 태그입니다. 이 메타 태그는 구글에 사이트의 이름을 검색했을 때 나타납니다. 웹 사이트를 만든 사람, 회사 등을 표현할 수 있는 메타 태그입니다. 웹 페이지를 제작할 때 사용했던 툴을 적는 메타 태그입니다. 사용한 툴이란 부트스트랩, 워드프레스와 같이 프레임윅을 말합니다. 검색엔진의 크롤링 및 색인 생성 동작을 제어하는 메타 태그입니다. index는 현재 페이지를 검색에 색인 여부를 설정할 수 있고 fol..

레이아웃 구성할 때 필요한 더미 텍스트, 이미지 사용 방법

웹 언어 배우기/HTML 다한(dahan) 2019. 9. 23. 07:00

더미 텍스트와 이미지는 레이아웃 구성할 때 필요합니다. 어느 정도 내용이 있어야 구조가 잡히기 때문입니다. 모든 에디터에서 사용 가능하며 손쉽게 사용할 수 있습니다. 함께 알아보겠습니다. 더미 텍스트 자신이 사용하고 있는 에디터에 가서 lorem을 입력하고 Tab키를 눌러보면 더미 텍스트가 나옵니다. 또한, lorem숫자를 입력하면 그 숫자만큼의 단어가 나옵니다. 예를 들어 lorem100이라고 입력하면 100 단어의 더미 텍스트가 나옵니다. 더미 이미지 이미지를 생성해주는 placeholder 사이트에 들어가면 사용방법과 함께 에디터에 적용할 수 있습니다. See the Pen dummy text, image by Cho-YoungHo (@choyoungho-web) on CodePen. /350은 가..

스크롤 내리면 줄어드는 고정 헤더 만들기

웹 언어 배우기/JavaScript 다한(dahan) 2019. 9. 22. 07:00

fixed로 되어있는 고정 헤더를 특정 스크롤 위치에 도달하면 줄어드는 헤더를 만들고자 합니다. HTML, CSS, jquery를 이용해서 만들어보겠습니다. 고정 헤더 높이 설정 예제 $(function(){ var shrinkHeader = 300; $(window).scroll(function(){ var scroll = getCurrentScroll(); if(scroll >= shrinkHeader){ $('.header').addClass('shrink'); }else{ $('.header').removeClass('shrink'); } }); function getCurrentScroll(){ return window.pageYOffset || document.documentElement.sc..

selectbox 화살표 꾸미는 방법

웹 언어 배우기/CSS 다한(dahan) 2019. 9. 21. 07:00

CSS에서 selectbox는 네이티브로 꾸미기가 까다롭습니다. 네이티브 즉, 자체 지원으로 기본적으로 커스터마이징을 할 수 없도록 되어있습니다. 그래서 화살표를 직접 꾸미기것이 아닌 없애고 새로운 화살표를 만들어야 합니다. 이미지를 삽입해서 꾸며도 되지만 저는 화살표를 만들겠습니다. 오른쪽 화살표 꾸미는 방법 크롬으로 보면 화살표가 그나마 이쁘게 보이지만 IE로 보면 체크박스형태로 표현된것을 볼 수 있습니다. 크롬, IE 할거없이 화살표를 없애고 커스터마이징으로 직접 꾸미는 방법을 알려드리겠습니다. selectbox 화살표 꾸미기 예제 Example select: select { appearance : none ; -webkit-appearance : none ; } select::-ms-expand ..

CSS 이미지 가운데 정렬 하는 2가지 방법

웹 언어 배우기/CSS 다한(dahan) 2019. 9. 20. 07:00

이미지뿐만 아니라 모든 태그는 기본적으로 왼쪽 정렬이 되어있습니다. 가운데 정렬을 하기 위해서는 웹 표준인 text-align:center을 쓰는 것이 일반적이지만 상황에 따라 다르게 표현해야 할 때도 있습니다. 그 방법에 대해 알아보겠습니다. 이미지 가운데 정렬하는 방법 부모 요소가 있는 경우 Example text-align: div { display : block ; text-align : center ; } img { display : inline; } 직접 해보기 text-align은 left, center, right, justify 속성 값을 가지고 있습니다. block 요소 안에 inline 요소가 있어야 가운데 정렬을 할 수 있습니다. 즉, text 뿐만 아니라 이미지도 가능하다는 뜻입니..

border-collapse / 표의 테두리와 td의 테두리 사이의 간격 처리 속성

웹 언어 배우기/CSS 다한(dahan) 2019. 8. 22. 10:57

border-collapse : 표의 테두리와 td의 테두리 사이의 간격을 어떻게 처리할 지 정하는 속성이다. 속성값에는 기본값인 separate, collapse, inital, inherit이 있다. border-collapse 속성값 separate : 표의 테두리와 td의 테두리 사이에 간격을 둔다. 이때, border-spacing 속성으로 간격의 크기를 나타낼 수 있다. collapse : 표의 테두리와 td의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. inital : 기본값 설정 inherit : 부모 속성의 속성값을 상속받는다. border-collapse 속성 예제 Separate 속성값 a b c aa bb cc Collapse 속성값 a b c aa bb cc

1
2
3
4
5
6

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바