본문 바로가기
728x90

Study/HTML&CSS

 (20)
[HTML/CSS] 클릭 시 페이지 내에 특정 위치로 스크롤 이동 페이지 내에서 특정 위치로 이동하는 방법에 대해 알아보자! 이번에는 자연스럽게 스크롤을 이용하여 이동하는 방법을 알아보려고한다. 참고로 이 방식은 스크롤이 될 내용이 길 수록 눈으로 효과를 확인 할 수 있다. HTML scroll1 scroll2 scroll3 scroll4 scroll1 scroll2 scroll3 scroll4 CSS /* reset */ ul, ol, li {list-style-type: none;} a {color: #333; text-decoration: none;} .list {position: relative; height: 50px; margin-bottom: 50px;} .list li {display: inline-block; padding: 0 20px;} .listb..
[HTML/CSS]웹 페이지 노출을 높여주는 검색 엔진 최적화 SEO(Search Engine Optinization) 검색 엔진 최적화는 웹페이지의 노출도를 높여 트래픽의 양과 질을 높이는 최적화 작업이다. ​ - 보안 프로토콜(HTTPS) - Robots.txt(로봇 배제 표준파일) & Sitemap.xml(사이트맵) - 타이틀 & 메타디스크립션 태그(검색엔진최적화 메타태그 + 기타 태그) : 길이제한 영문기준 320자, 한글 160자 - 소셜 검색엔진최적화 메타태그 ​ 이렇게 4가지 방법으로 웹 페이지의 노출도를 높여주는 최적화 작업의 예시를 아래서 보자 ​ 이미지 태그 및 최적화: 이미지 alt태그, 웹사이트에 사용되는 이미지에는 가능하면 alt태그를 설정해두는 것이 좋다. ​ 모바일 최적화​ 모바일 친화적인 웹사이트를 구축하여 운영하며, 구글에서 제공하는 ..
[HTML/CSS] css :root(가상선택자)를 통해 css 변수 선언 해보자! 보통 CSS문서에서 사이트 구축을 할 때나, 유지보수 작업을 하다보면 여러 곳을 임의로 바꿔야하고, 공통적으로 들어가는 부분들이 있다. CSS에서 이를 간단하게 변수를 선언하여 사용하면 좀 더 쉽게 작업을 할 수 있게 하기위한 방법을 알아보려한다. ​ 1. :root 의사 클래스 :root는 문서 트리의 루트 요소를 선택하며, HTML의 루트 요소는 요소이므로, :root와 html은 같다. ​ 2. CSS 변수(사용자 지정 속성) CSS:root를 이용해 가상선택자를 이용해 재사용할 값을 담아줄 변수를 만들어 저장해준다. 보통 웹사이트 하나를 만들면, 기본적으로 reset.css, common.css, sub.css 등 많은 양의 CSS를 가지고 있다. 유지보수를 하다보면 임의로 값을 변경하거나 컬러변..
[HTML/CSS] 표(table)의 태그를 사용해서 깔끔하게 만들어보자 저번에 table을 만드는 방법과 tr, th, td에 대한 기본 정의를 한 적이 있다. 이번에는 table의 태그와 css를 이용해 좀 더 깔끔하게 만들어 볼 것이다. 1.thead와 tbody란? 와 는 단어에서 알 수 있듯이 thead는 html에서 각 영역별로 head,body,footer라고 나누듯 table에서 콘텐츠 영역을 나눠 그룹화시킬 때 사용한다. ​ 그리고 thead와 tbody는 table의 자식요소로써 table 밖에서 사용하면 안됨. 또한, table에서 , 요소 아래에 위치힌다. ​ 2. caption, colgroup이란? caption와 colgroup 또한 table의 자식요소로써 caption는 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다. 나 같은 경우 웹접근성으..
[HTML/CSS] border-radius를 통한 라운딩 처리 생각보다 border는 많이 사용되는데 사용방법에 따라 다양한 표현처리를 할 수 있다. 보통은 버튼이나 input 등에 사용되는 편이며, 여러 가지 형태로 테두리 모양을 변형할 때도 사용되며 유용하게 쓰인다. border-radius는 전체 라운딩을 처리할 때 모서리의 값을 줄 수 있으며, 값이 다를 경우 시계방향 순서대로 값을 주면 된다. 이렇게 위의 그림처럼 각 모서리에 해당되는 곳만 라운딩을 주고싶다면 해당하는 부분에 값을 주면된다. .box { border-top-left-radius: 25px; border-bottom-left-radius : 25px; border-top-right-radius : 25px; border-bottom-right-radius : 25px; } 위의 이미지처럼 크..
[HTML/CSS] 가상 클래스 (pseudo class) 가상 클래스(pseudo class) :link 선택자: :visited 선택자: :hover 선택자: :active 선택자: :focus 선택자: 구조 가상 클래스(특성 위치에 있는 요소를 찾아 스타일 지정) :enabled와 disabled 선택자: Checked 선택자: Root 선택자: :nth-child(n)와 :nth-last-child(n) 선택자: :nth-child(n) : :nth-last-child(n) : 해당 요소들이 모두 부모 요소를 갖고 있어야 한다. 그 외 가상 클래스 :target 선택자: 앵커 목적지에 스타일 적용 :not 선택자: 특성 요소가 아닐 때 스타일 적용(괄호 안에 있는 요소 제외) | p:not(#ex) {color:blue;} 가상요소 | 내용 일부만 선택해..
[HTML/CSS] 연결 선택자 속성 선택자 연결 선택자 하위 선택자(= 자손 선택자 / descendant selector): 자식 선택자(child selector): 인접 형제 선택자(adjacent selector): 형제 선택자(sibling selectop): 속성 선택자 [속성] 선택자: [속성 = 값]: [속성 ~= 값]: [속성 |= 값]: [속성 ^= 값]: [속성 $= 값]: [속성 *= 값]:
[HTML/CSS]CSS기초 | 텍스트 스타일 텍스트 스타일 Font-family: 글꼴 지정(두 단어 이상으로 된 글꼴일 경우 따옴표 사용, 지정 글꼴이 없을 경우 대비하여 두 번째, 세 번째 글꼴지정) @font-face: 웹 폰트 적용 | font-family: 글꼴 이름, src: url(글꼴 파일 경로), format(파일 유형) Font-size: 글자 크기 조절 절대 크기: xx-small, x-small, small, medium, large, x-large, xx-large 상대 크기: larger, smaller 크기: em, ex, px, pt로 직접 지정(주로 px사용, 모바일은 em사용), 백분율(%) Font-weight: 글자 굵기 지정(normal(기본값), bold, lighter, bolder, 100~900(400:..

티스토리툴바