본문 바로가기

🌌 | WEB DEV115

CSS 기본 (5)_박스(padding, margin, box-sizing, box-shadow, test-shadow) 박스모델의 구조 사이즈 : width, height 간격 : margin(border 밖), padding(content와 border사이) margin, padding 속성 크기 지정 1. 한 개의 숫자 : 상 우 하 좌 모두 동일 2. 두 개의 숫자 : 상-하 / 좌-우 3. 네 개의 숫자 : 상 우 하 좌 (순서대로) box-sizing 1. box-sizing 설정X .box1 { width: 100px; height: 100px; border: 10px solid red; margin: 20px; } .box2 { width: 100px; height: 100px; border: 10px solid red; padding: 10px; margin: 20px; } 위의 그림처럼 padding값을 .. 2022. 1. 2.

CSS 기본 (4)_박스(border, border-radius) border 한 방에 여러 속성 지정 ex) border : 2px solid red; 속성 하나씩 border-style : 테두리 스타일 지정 solid dashed dotted double groove inset ouset boder-width : 테두리 두께 지정 px % 등 border-color : 테두리 색상 지정 color 값 방향 지정 border-top, border-bottom, border-left, border-right 각각을 지정해서 적용할 수 있다. border-radius border-radius : 코너를 둥글게 px, % 값 4개 -> 상 우 하 좌 (시계방향으로) 값 1개만 -> 상우하좌 모두 동일하게 2022. 1. 1.

CSS 기본 (3)_자손, 자식 선택자 '스페이스'는 자손선택자 '>'는 자식선택자 예시를 통해 알아보자! 코드 .box { border: 1px solid red; width: 400px; height: 400px; } .box div { border: 1px solid blue; width: 200px; height: 200px; padding: 20px; } 결과 가장 상위 영역은 box클래스이고 빨간 윤곽선이다. .box div 에 의해서 그 아래 자식선택자, 자손선택자까지 파란 윤곽선의 영역으로 표시된 것을 알 수 있다. 즉, '스페이스바'로 css선택자를 설정하면 '자손선택자'들을 모두 select한다. 다른 예시를 보자. 코드 .box { border: 1px solid red; width: 400px; height: 400px;.. 2021. 12. 31.

CSS 기본 (2)_서식 기본 서식 스타일 font-size : 크기 지정 px em rem 등 font-weight : 글꼴 두께 bold(700) normal(기본값,400) / 100~900 line-height : 줄 간격 em font-family : 글꼴 font-style : 문자 스타일 italic normal oblique color (색상 명) #16진수코드 rgb(0,0,0) rgba(0,0,0,0.5) - 마지막값 투명도 text-decoration : 텍스트 줄 표시/제거 underline(밑줄) line-through(취소선) overline none text-transform : 대소문자 설정 capitalize(첫 글자만 대문자) uppercase(대문자) lowercase(소문자) none text.. 2021. 12. 31.

CSS 기본 (1)_문법,선택자 역할 HTML 태그를 선택해서 디자인하고 배치하는 역할 링크하는 방법 1. 내부 스타일 : html파일 ... 사이에 2. 외부 스타일 : html파일 ... ... 사이에 css파일 링크 기본 문법 선택자 { 속성:값; } 선택자의 순서는 더 큰 개념을 먼저 써준다. (기본적인 작성 순서, 뒤바뀌어도 적용에 문제는 없음!) ex) body { background-color: orange; } h1 { font-size: 50px; color: red; } 선택자 종류 태그 선택자 p { font-size: 50px; color: red; } 클래스 선택자 .mycontent { text-align: center; font-size: 30px; } 아이디 선택자 #mycontent { text-align.. 2021. 12. 31.

HTML 핵심 태그들 HTML 핵심 태그 공부한 것들 기록! 문단, 텍스트 서식 h1~h6 제목 태그 p / br 문단 구분, 줄 바꿈 / br은 특별한 경우 아니면 쓰지 않는 것을 추천! b / strong 굵게 (strong은 시각장애인을 위한 html 작성 시에도 쓰임) u 밑줄 s / del 취소선 (del은 시각장애인을 위한 html 작성 시에도 쓰임) big / small 글자 크게, 작게 sup / sub 위 첨자, 아래 첨자 hr 수평선 목록 ul / ol 로 한 번 감싸고 그 안에 li 로 목록 수를 조절 순서가 없는 목록 ul > li Unordered List 1 2 3 4 순서가 있는 목록 ol > li Ordered List 1 2 3 4 중첩 중요!) 중첩 시 자식 노드는 li 안으로 들어가야 함! .. 2021. 12. 31.

HTML&CSS EMMET (w.VSCODE) EMMET이란? html이나 css 등의 코드를 작성할 때 효과적으로 시간을 단축시켜주는 확장기능! 입력 후 Tab키 or Enter키 누르기! HTML ! & html:5 html 표준 DTD문서 ! >>> link 링크페이지 link >>> link:css, favicon 등 link:css >>> . div 태그생성 . >>> .(클래스명) 지정한 클래스명 가진 div태그 생성 .title >>> #(id명) 지정한 id명 가진 div태그 생성 #title >>> 태그명.(클래스명) 태그명#(id명) span.title >>> span#title >>> > 자식 노드로 추가 table>tr>td >>> *로 여러 개를 한 번에 생성 가능 table>tr>td*3 >>> + 형제 노드로 추가 div>.. 2021. 12. 30.

이전 1 ··· 10 11 12 13 다음

티스토리툴바