본문 바로가기

CSS6

CSS 3일차 미디어 쿼리CSS에서 화면의 크기또는 방향등 디바이스의 특성에따라 다른 스타일을 적용할 수 있도록 해주는 기능. 반응형 웹을 만들때 화면크기에따라 요소들을 다르게 배치할 수 있다. @media(조건)조건 : max-width -> 최대넓이(max-width아래에서만 해당 스타일 적용) min-width -> 최소넓이(min-width위에서만 해당 스타일 적용) screen -> 현재 화면의 크기 반응형화면 넓이가 0 ~ 1200px일때 {}안에 스타일을 적용 @media (max-width: 1200px){ #wrap{ width: 100%; } #content2 .article-box{ flex: 0 0 50% ;} #content2 .article-b.. 2025. 9. 17.
CSS 2일차(4) 영역 속성content : 요소 내의 내용을 작성하는 영역border : 요소 내의 테두리 영역padding : content와 border 사이의 여백margin : 요소의 외부여백div안에 또다른 div를 여러 개 배치(flex 사용 X)상하로 2등분 좌우로 2등분 div안에 또 다른 div를 여러 개 배치(flex 사용)상하로 2등분 좌우로 2등분 상하로 2등분 좌우로 2등분 ">상하로 2등분 좌우로 2등분 UI틀 제작 로고 메뉴1 메뉴2 메뉴3 로그인|회원가입 .. 2025. 9. 11.
CSS 2일차(3) flex 레이아웃웹페이지 레이아웃을 효율적으로 구성하기 위한 기술, flexbox를 사용하면요소들을 부모요소 기준으로 유연하게 정렬하고 배치할 수 있다.정렬을 위한 부모 컨테이너display : flex -> 해당요소를 flex컨테이너로 사용하겠다.flex-direction : row | column -> 정렬을 위한 주축을 행(가로)/열(세로) 지정justify-content : flex-center | flex-end | center | space-between | space- around... -> 주축의 정렬을 어떻게 할 것인가align-itme : flex-center | flex-end | center | space-between | spac.. 2025. 9. 11.
CSS 2일차(2) 레이아웃블록요소 : 행을 전부 차지하고 있는 요소 / 다음 콘텐츠는 줄밖임 발생(div, p, pre, h...) 인라인요소 : 콘텐츠 부분만 영역을 차지하고 있는 요소 / 다음 콘텐츠가 바로 옆에 올 수 있음 / 단. 임의로 크기조절 안됨(span, lable, input, img, 글자...) 요소(element) : content + padding + border 외부여백 : margin width, height : 기본적으로 내용을 차지하는 컨탠츠영역의 가로, 세로 길이를 조절하는 데 사용 고정크기(px)"> 가변크기(%, vh/vw)"> display화면 배치 방법 변경형식 : 선택자{display : inline | block | inline-block | flex;} block한 줄을 .. 2025. 9. 11.
CSS 2일차(1) 선택자 우선순위기본적으로 css는 위에서 아래로 적용동일한 요소를 다양한 선택자로 css를 부여한 경우 우선순위에 따라서 결정태그선택자 -> 클래스선택자 -> 아이디 선택자 -> 인라인 스타일 ->! important 글꼴 글꼴테스트입니다 글꼴테스트입니다 글꼴테스트입니다 텍스트color텍스트 색상 지정형식 : 선택자{color : 색상명 | 16진수 색상코드 | rgb(r, g, b) | rgba(r, g, b, a);} text-decoration텍스트에 선 추가형식 : 선택자{text-decoration : none | underline | line-through | overline;}텍스트 영역 아래 줄 긋기텍스트 영역 취소선 긋기텍스트 영역 위에 줄 긋기">텍스트 영역 아래 줄 긋.. 2025. 9. 11.
CSS 1일차 기본 선택자css적용방법 1: 내부 스타일 방식현재 이 문서상에 적용시키고자 하는 스타일 정보들을 id는 하나만 존재할 수 있기 때문에 class를 사용하여 여러개 처리(id는 중복될 수는 있으며, css도 적용이 되어도, 비추천)3. 아이디 선택자 : #아이디 id 속성 : 해당 문서(DOM)에 딱 하나만 가지고 있는 고유 식별 속송 문서상에서 특정 html요소 하나만 선택하고 할 때 사용 리스트출력 리스트출력 리스트출력 리스트출력4. 클래스 선택자 : .클래스명 class 속성 : 특정 요소들을 묶어서 가져오기 위해 부여하는 식별자(그룹 식별 방식) 문서상에서 내가 원하는 요소 여러개를 선택하고자할 때 사용 클래스 o 클래스 x 클래스 .. 2025. 9. 10.

티스토리툴바