본문 바로가기
728x90
반응형
SMALL
[CSS] 포지션(Position), 위치 지정방식의 종류, z-index 1. css Position 요소의 위치를 결정하는 방식을 결정 2. 위치 지정방식 2-1. 정적 위치 지정방식 static position, 기본값 HTML 요소의 위치를 결정하는 기본적인 방식 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 2-2. 상대 위치 지정방식 relative position HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식 top, left, right, bottom 속성값을 사용하여 재설정 2-3. 고정 위치 지정방식 fixed position 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치 뷰포트를 기준으로 위치를 설정하는 방식 top, left, right, bottom 속성값을 사용할 수.. 2023. 3. 31.
[CSS] 디스플레이(display) 속성, 폼(form) 알아보기! 1. css 디스플레이 웹 페이지의 레이아웃을 결정하는 속성 block inline inline-block none ✔ visibility: hidden; -> visibility: visible; 디스플레이 display 속성값을 none으로 설정 display 속성값을 none으로 설정 display 속성값을 hidden으로 설정 display 속성값을 hidden으로 설정 2. css 폼 폼 요소의 스타일 설정 폼 아이디: 비밀번호: 직업: 프로그래머 디자이너 학생 공무원 유튜버 회원가입 2023. 3. 31.
[CSS] 패딩(padding), 마진(margin), 테두리(border) 속성 알아보기! 1. 패딩(padding) 내용과 테두리 사이의 간격 padding-top, padding-right, padding-bottom, padding-left padding: 위 오른쪽 아래 왼쪽순으로 설정 [css] div#padding { padding: 20px 50px 30px 10px;} /* 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px */ /* ⭐ 3개 */ div#padding { padding: 20px 50px 30px ;} /* 위 20px, 오른쪽 왼쪽 50px, 아래 30px */ /* ⭐ 2개 */ div#padding { padding: 20px 50px ;} /* 위 아래 20px, 왼쪽 오른쪽 50px */ /* ⭐ 1개 */ div#padding { padd.. 2023. 3. 31.
[CSS] 박스모델(Box Model)과 내용(Content)의 차이점, 박스사이징(box-sizing) 1. 박스 모델(Box Model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 2. 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 안녕 /*안녕이 들어있는 내용부분이 content */ 3. 박스 사이징(box-sizing) width, height 값에 padding, border 영역은 포함되지 않음 만약 width가 100%로 설정되는 경우 padding이나 border속성을 추가하면 안됨 box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함 content-box : padding과 border를 포함하지 않음 border-box : p.. 2023. 3. 30.
[CSS] 배경 설정하기 - 컬러 배경 설정, 이미지 배경 설정, 배경 반복, 배경 위치 설정, 배경 스크롤 고정, 배경 이미지 크기 설정, 배경 속성 한꺼번에 적용 1. background-color HTML 요소의 배경으로 나타날 배경 색상 설정 CSS 배경1 배경 적용하기 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque molestias quaerat, veritatis iure ab officiis maiores nesciunt nobis sapiente doloribus quos, quam, libero repudiandae facilis voluptatem neque sit maxime? 2. background-image HTML 요소의 배경으로 나타날 배경 이미지를 설정 배경 이미지는 기본 설정으로 반복되어 나타남 background-image: url(파일경로) 3.. 2023. 3. 30.
[CSS] TEXT설정 - 6️⃣ 폰트/글꼴 설정, 웹폰트 적용, 구글 폰트 적용하기 1. font-size 텍스트 크기를 설정 설정 단위 : px, %, em, rem ✔ em 단위 1em : 16px(PC), 12px(MOBILE) 2. font-family 텍스트의 글꼴을 설정 3. font-weight 텍스트의 굵기를 설정 기본 굵기: 400 (범위 100 ~ 900) ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라이언트에 글꼴을 다운로드 시켜 사용 웹 폰트를 사용 📌 구글 폰트 head 태그 안에 사용 https://fonts.google.com/ 📌 눈누 style 태그 안에 사용 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc css 텍스트 국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과.. 2023. 3. 30.
[CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow 1. white-space 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line) 2. text-overflow 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성(clip, ellipsis) 3. overflow 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성 css 텍스트5 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adip.. 2023. 3. 30.
[CSS] TEXT설정 - 4️⃣ 글자 그림자 설정하기 1. text-shadow 텍스트에 그림자효과를 설정 선택자 { text-shadow: 가로길이 세로길이 번짐정도 색상; } css 텍스트4 css text-shadow 속성1 css text-shadow 속성2 css text-shadow 속성3 css text-shadow 속성4 css text-shadow 속성5 📄 HTML 파일 2023. 3. 30.
[CSS] TEXT 설정 - 3️⃣ 텍스트 효과 지우기, 텍스트 밑줄/텍스트 윗줄/ 텍스트 취소선, 작은 대문자 1. text-decoration 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용 none : 텍스트 효과 없애기 underline: 텍스트 밑줄 line-through: 텍스트 취소선 overline: 텍스트 윗줄 2. text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정 lowercase: 텍스트 소문자 설정 uppercase: 텍스트 대문자 설정 capitalize: 앞글자를 대문자로 설정 3. font-variant 소문자를 작은 대문자로 변경(small-caps) HTML 귀도 반 로섬(네덜란드어: Guido van Rossum, 1956년 1월 31일 ~)은 네덜란드 출신의 소프트웨어 엔지니어이다. 프로그래밍 언어인 파이썬을 개발한 것으로 유명하다. 2005년부터 201.. 2023. 3. 30.
[CSS] TEXT 설정 - 2️⃣ 글자 수평 정렬, 단락 들여쓰기, 줄 높이 1. text-align 텍스트 수평 방향 정렬을 설정(left, right, center, justify) 2. text-indent 단락의 첫 줄의 들여쓰기를 설정 3. text-height 줄 높이를 정하는 속성 예) 글자 크기가 40px일 때 line-height: 1.5 ➡ 줄 높이는 40px의 1.5배인 60px ➡ 글자 크기는 40px 이므로 글자 위와 아래에 각각 10px의 여백이 생김 ➡ 만약 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침 css 텍스트2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deseru.. 2023. 3. 30.
[CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격 1. color 텍스트의 색상을 설정 기본값은 검정 📌 CSS 색상 알아보기⬇⬇⬇ https://coding-yesung.tistory.com/89 [CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 1. 색상 이름으로 표현 red, yellow, blue, salmon... 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) ------- ------- ------- RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ---------- ALPHA 3. 16진수 색상값으로 표현 #0000FF -> coding-yesung.tistory.com 2. letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 예) 안녕하.. 2023. 3. 30.
[CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 1. 색상 이름으로 표현 red, yellow, blue, salmon... 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) ------- ------- ------- RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ---------- ALPHA 3. 16진수 색상값으로 표현 #0000FF -> 파랑 00 00 FF -> 00F 로도 표현 가능함 R G B 📌 CSS 색상값 MDN ⬇⬇⬇ https://developer.mozilla.org/ko/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN CSS 자료형은 색을 나타냅니다. 는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는.. 2023. 3. 30.
728x90
반응형
LIST

티스토리툴바