본문 바로가기

css27

CSS 기본 (6)_포지셔닝(float, overflow, clear) float 부모 요소 기준, 왼쪽 or 오른쪽 배치 지정 margin : auto : 가운데로! (※주의 : block요소만 적용가능!) 예시 .parent { border: 5px solid red; width: 600px; /*자식요소에 height값 지정해주면 자동으로 늘어나기 때문에 높이 따로 지정X*/ } .child { background-color: gold; width: 200px; height: 200px; } float 속성을 따로 주지 않은 상태이다. 왼쪽으로 배치 되어있는 것을 보고 "기본값이 float: left 인가?" 라고 생각할 수 있지만 아니다! float 속성을 준 경우 .parent { border: 5px solid red; width: 600px; /*자식요소에 he.. 2022. 1. 5.

HTML 인라인 요소, 블록요소, 인라인블록 인라인(inline) 요소 - 한줄에 여러개 배치 - 기본 너비값 = 컨텐츠 width값 - 크기값을 가질 수 없음 - 상-하 margin X (좌우 O) (text서식) 블록(block) 요소 - 한줄에 only One - 기본 너비값 = 100% - 크기값 O - 상하좌우 margin O (레이아웃) 인라인 블록(inline-block) 요소 - 한줄에 여러개 - 기본 너비값 = 컨텐츠 width값 - 크기값 O - 상하좌우 margin O 인라인 블록 인라인-블록 span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map, cite, abbr, time div, p, table, blockquote,.. 2022. 1. 5.

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&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.

스파르타 코딩 클럽 신년운세 패키지 후기! 스파르타 코딩클럽 서포터즈 르탄즈🔥🧑‍💻 . 이번에는 무료로 제공된 '신년운세패키지' 특강을 듣고 난 후기 컨텐츠를 제작해보았습니다! HTML과CSS를 다뤄보았고 아주 조금이지만 JS맛보기까지 경험해볼 수 있었습니다.🙂 서포터즈 활동으로 강의를 수강한 것이지만 '내가 직접 값을 지불하고 선택한 강의라면?' 이라는 관점에서 수업에 참여를 했는데요! 스파르타만이 가지고 있는 장점들 덕분에 정말 흥미있게 들을 수 있었습니다😄 그리고 지난 1주 차의 활동 덕에 우수활동자로 선정이 되어서 5주 간 정규강의를 수강할 수 있는 기회를 얻게 되었습니다!🔥 그 후기는 추후에 모든 강의를 듣고 난 후 작성해보도록 하겠습니다!! 2021. 11. 26.

이전 1 2 3 다음

티스토리툴바