CSS 결합자 (Combinators)
2022. 8. 7. 14:32
HTML CSS 개념
자손 결합자 div span { color: red; } 으로 공백으로 표현 div 하위의 모든 span태그에 적용 자식 결합자 div > span { color: red; } > 으로 표현 div 바로 아래의 span태그에 적용 일반 형제 결합자 p ~ span { color: red; } ~ 으로 표현 p의 형제 요소 중 뒤에 위치하는 모든 span태그에 적용 인접 형제 결합자 p + span { color: red; } + 으로 표현 p의 형제 요소 중 바로 뒤에 위치하는 span태그에 적용
CSS 기본 스타일
2022. 8. 7. 14:03
HTML CSS 개념
크기 단위 px: 모니터 해상도의 한 화소인 '픽셀' 기준, 고정적임 %: 백분율 단위, 가변적인 레이아웃에서 자주 사용 em: (바로 위, 부모요소에 대한) 상속의 영향을 받음 상대적인 사이즈를 가짐 rem 상속의 영향 x, 1rem = 16px vw viewport의 영향을 받아 늘어나고 줄어듬 색상 단위 RGB 색상 : 16진수 표기법으로 표현 ( color: rgb(0, 255, 0) ) HSL 생상 : 색상, 채도, 명도를 통해 색을 표현 ( color: hsl(0, 100%, 50%) ) black컬러 표기법 color: black; color: #000; color: #000000; color: rgb(0, 0, 0) color: hsl(120, 100%, 0)
CSS 선택자 Selectors
2022. 8. 7. 13:45
HTML CSS 개념
h2 { color: darkviolet !important; } 여기서 h2는 선택자임 선택자의 유형에는 기본 선택자, 결합자, 의사클래스/요소 등이 있음 기본선택자 전체 선택자, 요소 선택자 클래스 선택자, 아이디 선택자, 속성 선택자 결합자 자손 결합자, 자식 결합자 일반 형제 결합자, 인접 형제 결합자 * 전체 선택자 h1 요소 선택자 (HTML 태그를 직접 선택) .class 클래스 선택자 (마침표(.)문자로 시작하며, 해당 클래스가 적용된 항목 선택) #id 아이디 선택자 (# 문자로 시작하며, 해당 아이디가 적용된 항목을 선택) .box > p 자식 선택자 .box p 자손선택자 CSS 적용 우선순위 가장 중요시 되는 것은 !important 지만 잘 사용하지는 않는다. 인라인 > id > ..
CSS 기본 개념
2022. 8. 7. 13:32
HTML CSS 개념
CSS란? 스타일을 지정하기 위한 언어 선택하고, 스타일을 지정 예제 h1 { color: blue; font-size: 15px; } 여기서 h1은 선택자 color는 텍스트의 색깔 font-size는 텍스트의 크기 지정 태그 안에서도 스타일 지정이 가능함 헤드 부분에서도 직접 만들 수가 있음 CSS파일을 하나 만들면 다양한 link를 통해 HTML파일에 적용시킬 수 있음
HTML 태그
2022. 8. 7. 13:27
HTML CSS 개념
인라인 텍스트 요소 href 속성을 활용하여 다른 URL로 연결하는 하이퍼링크 생성 , 굵은 글씨 , 기울임 글씨 텍스트 내에 줄 바꿈 생성 이미지 태그 의미 없는 인라인 컨테이너 블록 요소 하나의 문단 구분선 순서가 있는 리스트 순서가 없는 리스트 의미 없는 블록 컨테이너
Breakpoints (부트스트랩)
2022. 8. 4. 17:57
HTML CSS 개념
Breakpoints 부트스트랩에서는 기본적인 Breakpoints를 사용 할 수 있는 클래스가 있다. 예를 들어 클래스를 d-md-none으로 지정하면 md부분 즉, 768이상의 구간인 경우 none을 display하겠다는 의미로 화면에 나타나지 않는다. CSS를 통해서 미디어 쿼리를 사용해서도 breakpoint를 만들 수 있다. 예를 들어 @media screen and (max-width: 414px) { .my_class { color: red; font-size: xx-large; } } 위 코드를 입력하면 414px 이하인 구간에서는 지정해준 스타일이 적용된다. 부트스트랩에 지정된 breakpoint가 자신이 원하는 구간이 없다면 이런식으로 만들면 된다.
CSS 부트스트랩 bootstrap
2022. 8. 4. 16:33
HTML CSS 개념
부트스트랩 다양한 기능 속성들을 클래스로 만들어 제공해줘 부트스트랩을 이용해 다양하게 html을 꾸밀 수가 있다. d-flex 자식 태그들을 flex화 시켜준다. CSS의 display: flex;와 똑같다. 디폴트는 flex-direction: row; flex-(속성들) 을 이용하면 flex를 다양하게 조작 가능하다.
CSS 플렉스 Flex
2022. 8. 4. 16:32
HTML CSS 개념
CSS Layout float 박스를 왼쪽 혹은 오른쪽으로 이동시켜 텍스트를 포함, 인라인 요소들이 주변을 감싸도록 함. (한글에서 사진을 삽입하면 객체 설정의 문자열 옆으로 놓게 해 주듯이) Flexible Box 행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 모델 행 형태로 배치된 아이템 들을 열 형태로 바꿔줌 display: flex; flex-direction: row-reverse; 로 해주면 아이템들이 오른쪽부터 가로로 정렬이 됨 ( row: 디폴트, 아이템들이 왼쪽부터 가로로 정렬이 됨 , row-reverse , column: 아이템들이 위에서부터 아래로 세로로 정렬이 됨 , column-reverse를 사용 가능 ) display: inline-flex; 해주면 사각형이 만들어지고 ..