본문 바로가기
반응형

분류 전체보기141

[HTML] ul태그 안녕하세요 오늘은 리스트를 정의하는 ul태그를 포스팅하겠습니다. 태그는 순서가 없는 HTML 리스트를 정의할때 사용합니다. 요소에 속하는 아이템은 요소를 사용하여 나타내며, bullet이나, 사각형 모양, 또는 style을 사용해서 수정 가능합니다. 사과 딸기 바나나 수박 포도 기본형식은 위 처럼 사용되고요 결과는 이렇게 결과가 나오게되고요 기본적으로 리스트마다 bullet이 적용됩니다. 불릿을 사용하지 않으려면 css를 사용해서 list style을 적용해주면 됩니다. square 사각형, bullet 기본형 none 없애기 위이미지는 css를 이용해서 li{list-style:none;} 을 적용한 값입니다. 주로 float 이나, display를 통해 리스트를 옆으로 나열할수 있는데요. 해당 li .. 2022. 4. 15.
[HTML5, CSS3] 텍스트 style 알아보기 (font-size, color, font-family) 안녕하세요. 오늘은 텍스트 style 관련 포스팅 하겠습니다. 기본적으로 웹에서 텍스트를 출력을 할때, 텍스트의 크기, 색상, 글꼴 등을 설정 할수 있는데요, font-size : 폰트 크기(기본적으로 px값을 이용하며, 반응형의 경우 %값을 설정할 수 있습니다. color : 폰트 색상 (black, red 처럼 css에서 바로 적용 가능한 색상이 있지만 기본적으로 #000000 이런 색상표 형식을 이용해서 적용합니다. font-family : 글꼴 설정(보통 웹폰트를 이용하기도 하고 글꼴 파일을 올려서 적용하기도 합니다.) line-height : 행간 letter-spacing : 자간 font-weight: 폰트 굵기 text-align : 텍스트 정렬 (left, center, right) 보통.. 2022. 4. 12.
[html] table 관련 태그 안녕하세요 오늘은 table 태그를 포스팅 하겠습니다. table은 웹상에서 표 형식을 나타낼수 있습니다. table : 해당 테이블 tr : 테이블에서의 행을 나타냅니다 td : 테이블에서의 열을 나타냅니다. th : 테이블에서의 열을 나타내지만 head로 제목에 쓰입니다. 제목1 제목2 제목3 내용1 내용2 내용3 내용4 내용5 내용6 기본적으로 위와 같이 작성해서 사용됩니다. 하지만 표에서 엑셀처럼 행 합치기, 열 합치기를 이용하듯이 사용할수 있습니다. 보통 td 안에 넣어서 사용됩니다. rowspan 행합치기 colspan 열합치기 제목1 제목2 제목3 내용1 + 내용2 내용3 내용4 내용5 내용6 열을 합치게 되면 td가 두개가 합쳐지므로 2개의 열을 이용합니다. 행합치기도 같은 방식으로 생각해.. 2022. 4. 11.
드롭다운 메뉴 (css 활용) 오늘 포스팅은 홈페이지에서 자주 사용하는 메뉴 구성을 해보겠습니다. 보통 드롭다운 메뉴라고하면, 메뉴에 마우스를 갖다댔을때 숨어있던 세부 메뉴가 노출됩니다. 먼저 ul li 태그 이용해서 메뉴를 구성합니다. 홈 메뉴1 세부1-1 세부1-2 세부1-3 메뉴2 세부2-1 세부2-2 세부2-3 메뉴3 세부3-1 세부3-2 세부3-3 대메뉴 쪽에 세부메뉴를 사용할 곳에 ul li 를 더 넣어서 구성해줍니다. 그후에 ul li 안에 들어가있는 세부메뉴는 css 에서 display:none을 이용해서 숨겨주고 대메뉴에 마우스 오버시 출력되게 할 것입니다. .menu > li{line-height:40px;height:40px;float:left;width:calc(10% - 1px);background:rgba(0.. 2022. 4. 10.
반응형

티스토리툴바