본문 바로가기

Frontend/HTML + CSS

 (8)
[bootstrap] 부트스트랩 사용하여 CSS작성 간단하게 하기 https://getbootstrap.com/docs/3.3/ Bootstrap · The world's most popular mobile-first and responsive front-end framework. Preprocessors Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source. Full of features With Bootstrap, you get extensive and beau getbootstrap.com 위의 ..
[CSS] CSS로 네비게이션 롤오버 홈페이지에 들어가면 다양한 메뉴를 보여주는 네비게이션바가 있습니다. 위와 같이 너무 많은 메뉴가 있을 경우에는 아래쪽의 리스트들은 접었다가 폈다하는 롤오버기능을 통해 사이트의 공간을 효율적으로 사용할 수 있습니다. 저는 3가지 정도의 유형에 대해서 css만사용해서 코딩을 해보겠습니다. 기본 세팅 리스트1 안쪽리스트1 안쪽리스트2 안쪽리스트3 리스트2 안쪽리스트1 안쪽리스트2 안쪽리스트3 리스트3 안쪽리스트1 안쪽리스트2 안쪽리스트3 리스트4 안쪽리스트1 안쪽리스트2 안쪽리스트3 리스트5 안쪽리스트1 안쪽리스트2 안쪽리스트3 먼저 예시로 보여준 네비게이션바의 기본 소스코드입니다. 여기서 소스코드를 추가해서 다양한 유형의 롤오버 기능을 완성 시켜보겠습니다. 1. gnb전체가 내려오기 버전1 #gnb { wi..
[CSS] 박스 모델 콘텐츠 영역 padding margin border 박스 모델은 상하좌우 4개의 방향에 있어서 margin, padding 등을 지정할 때 다양한 방법으로 적용할 수 있습니다. 4개의 방향에 대한 값을 작성할 때 순서를 잘기억해 두어야합니다. 순서 : top -> right -> bottom -> left 1. 콘텐츠 영역 컨텐츠 영역의 크기를 지정하는 방법은 다양한 방법을 사용하는데(px, pt, vh, vw, em, rem) 등의 여러 단위를 사용해서 크기를 지정합니다. 그런데 만약 width: 100px, height: 100px를 적용했다고 생각해봅시다. 여기서 padding: 100px를 적용하면 어떻게 될까요? width:100px, height:100px를 적용했지만 padding으로 인해 ..
[CSS] 단위(크기), font-size css에서는 단위를 사용해서 글자의 크기를 직접 지정합니다. 사용하는 단위의 종류와 설명은 아래와 같습니다. em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율 값을 지정합니다. rem : 문서 시작 부분(roo)에서 지정한 크기를 기준(1rem)으로 한 후 비율 값을 지정합니다. ex : 해당 글꼴의 소문자 x의 높이를 기준(dx)으로 한 후 비율값을 지정합니다. px : 모니터의 1픽셀을 기분(1px)으로 한 후 비율값을 지정합니다. pt : 포인트라고 하며, 일반 문서에서 많이 사용합니다. % : 백분율은 부모요소의 글자 크기를 기준으로 계산하여 지정하는 방법으로 부모요소의 글꼴 크기가 16px처럼 단위로 표현되어 있어야 합니다. * { margin: 0; } b..
[CSS] 스타일 시트 적용방법, 스타일 우선순위 인라인 스타일 내부 스타일 시트 외부 스타일 시트 우리가 CSS를 사용하지 않고 html 코드만 작성해도 기본 값으로 있는 CSS값이 있습니다. 이를 부라우저 기본 스타일이라고 합니다. 지금부터 사용자가 직접 작성하는 사용자 스타일에 대해서 설명하겠습니다. ★참고 : 스타일 우선순위는 높은 것 부터 ① 사용자 스타일 ② 제작자 스타일 ③ 브라우저 기본 스타일 겹칠경우 ① !important ② 인라인 스타일 ③ id 스타일 ④ 클래스 스타일 ⑤ 타입 스타일 1. 인라인 스타일 인라인 스타일은 가장 간단하게 사용할 수 있는 적용방법으로 아래와 같은 방법으로 적용시킬 수 있습니다. 웹문서 제작 2. 내부 스타일 시트 html 파일 안에서 정리 한것으로 head 태그 안에서 정의하고 style태그 사이에 작성..
[HTML] 목록 만들기(ol,ul,li,dl,dt,dd 태그) , 태그 , 태그 , 태그 1. 순서가 있는 목록 , 태그 ol은 ordered list 의 약자로 말 그대로 각 항목을 순서대로 나열한 것입니다. 발라드 너의 번호를 누르고 소주 한잔 같은 배게 랩 네가 없는 밤 리무진 불도저 재즈 재즈 아무것도 몰라 HTML 삽입 미리보기할 수 없는 소스 type속성과 start속성을 이용해서 li앞에 이용되는 값들을 바꿀 수 있기도 합니다. 하지만 거의 사용되지 않는 속성이므로 넘어 가겠습니다. 2. 순서가 없는 목록 , 태그 unordered list의 약자로 말그대로 순서가 없는 목록을 만드는 태그로 실제 웹사이트에서는 ol,li 보단 ul,li를 자주 이용합니다. 한식 불고기 김치 나박김치 오이김치 열무김치 매운 열무 김치 많이 매운 열무 김치 갈비 일식 연어..
[HTML] paragraph 태그 paragraph 태그는 단락, 절이라는 뜻으로 텍스트의 단락을 지정해 줄때 사용합니다. 웹사이트 제작 웹사이트를 제작하기 위한 기술에 대하여 기술합니다 HTML 웹사이트의 구조화와 설계를 담당합니다 CSS 웹문서에 디자인을 적용하여 시각적인 요소를 돋보이게 합니다 현재 css의 역할은 애니메이션과 반응형까지 확대되어 더욱 중요시되고 있습니다 JavaScript 동적인 부분을 담당하여 사용자와의 인터랙티브가 가능하게 합니다 HTML 삽입 미리보기할 수 없는 소스 특징으로는 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다는 특징이 있습니다.
[HTML] heading 태그 heading 태그는 outline을 구성하는 주된 요소로 hn의 (n은 1~6까지)의 형태로 사용합니다. 제목태그입니다 제목태그입니다 제목태그입니다 제목태그입니다 제목태그입니다 제목태그입니다 HTML 삽입 미리보기할 수 없는 소스 위의 소스 코드처럼 h1~6 까지 사용할 수 있고 font-size가 점점 작아지게 됩니다. 실제 사이트에서는 많아도 3까지만 사용되고 그 이상 h4,h5까지 가버리면 outline 구조가 너무 복잡해지기 때문에 h3까지만 쓰는 것을 권고 드립니다.

티스토리툴바