본문 바로가기
반응형

전체 글141

HTML 텍스트 태그 안녕하세요 html 텍스트 태그를 소개하겠습니다. 많이 쓰이는 태그들도 있고, 많이 안쓰이는 태그들도 있고, 태그가 아닌 css로 적용할수 있어서 css로 적용하는 태그들도 있습니다. - 굵은 글씨 (css에서 font-weight:700 으로도 적용 가능) - 굵은 글씨 (css에서 font-weight:700 으로도 적용 가능) - 이텔릭체 - 강조문자 - 텍스트뒤 배경 - 폰트 사이즈, 굵이 작게 노출 - 텍스트 가운데에 줄 - 밑줄 - 텍스트가 조금 아래로 치우침 - 텍스트가 조금 위로 치우침 이렇게 있는데 생소한 태그들도 있고 저는 b, strong, small은 많이 사용 했던것 같습니다. 텍스트테스트 텍스트테스트 텍스트테스트 텍스트테스트 텍스트테스트 텍스트테스트 텍스트테스트 텍스트테스트 텍스.. 2022. 4. 30.
HTML 반응형 웹 설정 메타 태그 반응형 웹을 만들기 위해서는 메타태그를 선언합니다. 뷰포트 메타태그를 추가하면 해상도에 맞게 페이지가 설정됩니다. 일반 웹페이지에서는 width 사이즈를 px로 표기하는데 반응형 웹에서는 스타일 width 사이즈를 px이 아닌 %로 설정해서 적용합니다. 스타일에 width 를 %로 잡아주면 이미지가 화면에 맞게 조절 됩니다. 2022. 4. 29.
[html] a 태그 활용 (blank, self, parent, top) a태그는 보통 링크를 걸어 줄때 활용됩니다. a태그에서도 활용법이 여러가지가 있는데, 포스팅 하겠습니다. 서브메뉴바로가기 전화걸기 메일보내기 파일다운로드링크 링크 이동말고도 전화걸기, 메일전송, 파일다운로드로도 링크를 걸어이용 할 수 있어요 서브메뉴바로가기1 서브메뉴바로가기2 서브메뉴바로가기3 서브메뉴바로가기4 그리고 a태그에 타겟을 걸어 사용할수 있는데요, blank 새창, 새탭에서 링크를 열기 self 현재창에서 링크 열기 parent 부모창에서 링크열기 top 현재 열려있는 최상위 창에서 링크 열기 이렇게 이용하는데, 저는 대부분 blank나 self 만 사용하더라구요. 2022. 4. 27.
[Jquery] hide(),show(),toggle() 안녕하세요 기본적이지만 자주쓰이는 제이쿼리문인 hide,show,toggle입니다. hide : 숨기기 show : 보이기 toggle : 숨기기/보이기 버튼 클릭시 동작이 되도록 코딩했습니다. 문구입니다. 클릭하세요 클릭하세요 버튼을 클릭했을시, p태그 문구입니다를 hide()하면서 숨겨줍니다. 이건 클릭하세요 버튼을 클릭시에 보여줍니다. hide 되거나 css에서 display:none 되어있는 부분을 보여지게 합니다. toggle도 동일하게 사용하며, 클릭시 보여질때 숨겨지고, 숨겨졌을때 보여지게 해줍니다. 2022. 4. 26.
[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.
반응형

티스토리툴바