본문 바로가기

728x90

Study/HTML&CSS

(20)
[HTML/CSS] 스크롤 기능만 살려보자! overflow: auto를 통해 스크롤 기능을 추가하면 항상 기본에 속하는 못난이 스크롤이 나타난다. 이걸 없애고 모바일에서 사용을 고려하여 기능만 살려보려고 한다. .scroll { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } . scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }내가 주려는 영역의 클래스에 위의 코드처럼 css를 주면 된다. 또한, 모든 영역의 스크롤에게 동일한 스타일을 주고 싶다면body { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: no..
[html/css] 디바이스 별 분기점에 따른 반응형 사이즈 반응형 작업을 할 때, 디바이스 별 분기점에 따라 4가지로 나누거나 3가지로 나누어 미디어쿼리를 통해 작업한다. 디바이스 별 분기점 4개의 반응형 분기점 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/} /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/} /* 모바일 가..
[HTML/CSS] HTML 마크업 | HTML 마크업의 기초 HTML 마크업 분류 마크업 언어는 크게 순차적 마크업 언어(procedural markup language)와 서술적 마크업 언어(descriptive markup language)가 있다. 순차적 마크업 언어는 한 문서에 기본 데이터, 구조, 표현 정보가 저장되며, 문서 내용을 어떻게 시각적으로 표현할 것인가에 대한 정보를 비롯하여 폰트, 색상, 여백, 줄 간격 등 표현에 관련된 다수의 추가 정보가 포함된다. 반면, 서술적 마크업 언어는 기본 데이터와 구조만으로 이루어져 있기 때문에 제목, 부제목, 작가, 서론, 주소, 참고 도서 등의 구조 정보만 가지고 있다. 용어 설명 HTML(Hypertext Markup Language) SGML에서 비롯된 하이퍼 텍스트를 표기하는 언어 XHTML(Extens..
[HTML/CSS] CSS : clearfix 방법 | 가상요소, overflow, clear, float float를 사용하다보면 필요한 순간이 생기는 clearfix방법 4가지를 알아보고자 한다. CSS float float는 element에 부유 속성을 줘 배치할 수 있는 방법으로 메뉴부분에 주고 사용된다. left, right을 사용할 수 있으며 해당 위치에 떠있게 된다. display 속성과 함께 쓰면 display 속성은 무시된다. width, height 설정이 가능하다 float으로 컨텐츠를 띄울 시 다음 내용은 빈자리를 채우려 올라오게 된다. 이러한 현상은 브라우저의 오류로 생겨난 것이고, 이를 해결하기위해서는 clearfix를 사용하는데 위의 오류를 해결하기 위한 일종의 버그 해결 방법이다. CSS clearfix clearfix는 네가지 방법이 있으며, 각 방법에 대해 알아보자. 가상 요소..
[HTML/CSS] CSS 말풍선 만들기 | border 말풍선 만드는 방법 오늘은 css를 통해 말풍선을 만들어 보려고한다. 먼저 css로 만들기 전에 말풍선 만드는 방법에 대해 이해를 해야한다. border를 통해 화살표를 만들어줘야하는데 border의 top, bottom, left, right에 컬러를 따로 줄 경우 위의 그림처럼 각 부분이 삼각형으로 나타난다. 보통 border값을 줄 때에는 border: 10px solid red; 이렇게 주는데 여기서 10px가 위의 그림의 width값이라고 생각하면된다. 그리고 width값은 위의 그림처럼 되기 위해서는 left의 width값만 고려할 대상이 아니라 top과 bottom의 width값도 고려해야 할 대상이다. 삼각형의 형태도 정삼각형, 이등변삼각형 등 형태가 다른 만큼 width 값이 달라질 수 있다. 위의 이미지에..
[HTML/CSS] tab menu, 탭메뉴 만들기 이번엔 웹에서 자주 사용되는 방식의 tab메뉴를 위주로 한번 만들어보려고 한다. TabMenu의 메뉴 단부분과 메뉴 클릭 시 보여지는 창 부분을 잡아주어야 한다. 에 를 이용해 메뉴의 단 부분의 틀을 만들고, 에는 id값으로 "intTab", 안에 태그를 이용하였다. 의 title값에 "tab1","tab2","tab3"으로 각자 값을 주었다. ​ tab메뉴의 창부분은 를 이용해 각각 잡아주었으며, id값은 단부분 메뉴 에 사용했던 title값과 동일하게 주었다. HTML 전체 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 test1 test2 test3 test4 test5 test6 CSS li {list-style-type: none;} a {color: #333; text-decoration: none;} ..
[HTML/CSS] dl dt dd 태그에 대해서 알아보자 오늘은 dl, dt, dd 태그에 대해 알아보려고 한다. 태그는 용어의 정의와 내용 설명이 필요할 때 사용하는 태그이며, 태그는 제목을 의미한다. 또한, 태그는 내용 설명을 의미한다. 제목과 내용 파트는 서로 개수가 대응되지 않아도 괜찮지만, 제목과 내용이 1:1로 쌍을 이룰 때만 사용하는 것을 권장한다. 정의 정의에 대한 설명값 태그 정의가 필요한 목차를 설정할 때 사용하며, 태그 단독으로는 사용될 수 없다. , 태그가 태그와 결합되서 사용하듯, 태그는 태그와 태그와 결합해서 사용한다. 태그 용어의 정의를 나타내며, 인라인 요소이기 때문에 , , 등과 같은 블록 요소가 내부로 삽입될 수 없다. 태그 태그의 용어를 설명하며, 기본적으로 들여쓰기가 설정되있다. 태그는 블록 요소이기 때문에 , , , , ,..
[HTML/CSS] css 말줄임 처리하기 | 텍스트 text-overflow: ellipsis 웹페이지를 작성할 때에는 말줄임(...)을 사용하는 경우가 많은 편이다. 말줄임표를 사용하게 되면, 더 많은 문장을 간결하게 생략하여 표시할 수 있다. 말줄임 표시하는 방법 Lorem ipsum dolor sit amet -> Lorem ipsum dolor sit... 위와 같이 표현 하기 위해서는 HTML과 CSS를 통해 처리해주어야한다. See the Pen Untitled by HAJIN LEE (@rajin444) on CodePen. 말줄임을 2줄로 하기위해서는 -webkit-line-clamp를 이용하여 문자길이의 지정된 라인이 넘어가면 말줄임 처리를 해준다. .ellipsis { width: 200px; overflow: hidden; text-overflow: ellipsis; displ..