티스토리

💛HAPPYRIN💛

검색하기

블로그 홈

💛HAPPYRIN💛

happyrina.tistory.com/m

🐣I'm a Frontend Developer🐣 23.07.22 START🔥

구독자: 0

방명록 방문하기

주요 글 목록

[React] react css 충돌, 같은 클래스명을 쓰면 안된다고? 공감수 0 댓글수 0 2023. 8. 21.
브라우저의 기본 css 스타일 값 초기화 reset.css link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.css"> 공감수 0 댓글수 0 2023. 8. 19.
css transition, easing function transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 속성명 지속시간(단축형으로 작성할 때, 필수 포함 속성) 타이밍함수 대기시간; = transition-property transition-duration transition-timing-function transition-delay 쉼표를 통해 단축 속성값 구분 할 수 있음 transition-property : 전환 효과를 사용할 속성 이름을 지정all : 모든 속성에 적용속성이름 : 전환 효과를 사용할 속성 이름 명시ex) transition: width 1s; => 배경색이 확 바뀌면서 트렌지션 효과 적용된다transition-duration : 전환 효과의 지속시간을 지정, 필수로 넣어주어야 함0s : 전환 효과 없음시간 .. 공감수 0 댓글수 0 2023. 8. 15.
css position relative, absolute, fixed, sticky, z-index, display, flex, 수평, 수직 정렬 레이아웃 position : 요소의 위치 지정 기준으로 position과 같이 사용하는 css속성들은 모두 음수를 사용할 수 있다. (top, bottom, left, right, z-index..)static : 기준 없음, 포지션 없음relative : 요소 자신을 기준absolute : 위치 상 부모 요소를 기준 (위치 상 부모 요소를 꼭 확인해야함!), 붕뜨면서 겹쳐짐fixed : 뷰포트(브라우저)를 기준sticky : 스크롤 영역 기준top, bottom, left, right : 요소의 각 방향별 거리 지정auto : 브라우저가 계산단위 : px, em. rem 등 단위로 지정 relative와 absoulte 요소 쌓임 순서 (stack order) 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는.. 공감수 0 댓글수 0 2023. 8. 13.
css box-sizing 크기 계산, content-box, border-box, overflow, display, inline-block, opacity, 투명도, font, background 배경 box-sizing : 요소의 크기 계산 기준을 지정 content-box : 요소의 내용(content)으로 크기 계산 (기본값) border-box : 요소의 내용 + padding + border로 크기 계산 overflow : 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성 부모 요소에 적용을 시켜야함 visible : 넘친 내용을 그대로 보여줌 hidden : 넘친 내용을 잘라냄 scroll : 넘친 내용을 잘라냄, 스크롤바 생성 auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 요소의 크기 이상으로 내용이 넘쳤을때, 보여짐을 제어하는 개별 속성들 overflow-x : x축으로만 넘치는 부분만 확인 overflow-y : y축으로만 넘치는 부분만 확인 disp.. 공감수 0 댓글수 0 2023. 8. 12.
css 테두리선 border 과 색상 표현, border-radius, 모서리 둥글게 border : 선-두께 선-종류 선-색상; 요소의 테두리 선을 지정하는 단축 속성 border : 요소의 크기가 커짐, 패딩과 같이..! border-width 선-두께 단위 : px, em, % 등 단위로 지정하는 정확한 수치로 표현! border-style 선-종류 none : 선 없음 solid : 실선(일반 선) dashed : 파선, 점선 dotted, double, groove, ridge, inset, outset 등이 있다. border-color 선-색상 black : 검정색 (기본값) 색상 : 선의 색상 (직접 지정) transparent : 투명 top, right, bottom, left; 모두적용 top, bottom right, left; top left,right bottom.. 공감수 0 댓글수 0 2023. 8. 12.
css 표현 단위, px, %, em, rem, vw, vh 단위 px : 필셀 % : 상대적 백분율 em : 요소의 글꼴 크기 (1em = 10px) rem : 루트 요소(html)의 글꼴 크기 (루트라고하면 최상위를 말함 vw : 뷰포트 가로 너비의 백분율 vh : 뷰포트 세로 너비의 백분율 0을 입력할땐 단위를 붙이지 않아도 된다. https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units CSS 값 과 단위 - Web 개발 학습하기 | MDN CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위 developer.mozilla... 공감수 0 댓글수 0 2023. 8. 11.
css 가로/세로 너비 width, height, max-width, max-height, min-width, min-height width 요소의 가로 너비 height 요소의 세로 너비 기본값 - auto : 브라우저가 너비를 계산 - 단위 : px, em, vw 등 단위로 지정 : 대표적인 인라인 요소로 본질적으로 아무것도 나타내지 않는 콘 텐츠 영역을 설정하는 용도이다. auto 가로,세로 너비는 포함한 콘텐츠 크기만큼 자동으로 줄어든다. 레이아웃 작업용이 아닌 글자 작업용이기에 가로 세로를 적용할 수 없다. : 대표적인 블록 요소로 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다. auto 가로 너비는 부모 요소의 크기만큼 자동으로 늘어나고 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어든다. 요소가 커질 수 있는 최대 가로/세로 너비 max-width max-height min-width min-height.. 공감수 0 댓글수 0 2023. 8. 11.
css 스타일 상속 상속되는 css 속성들 모두 글자/문자 관련 속성들 (모든 글자/문자 속성은 아님 주의!) font-size font-weight font-style line-height font-family color text-align ... 강제 상속 실질적으로 상속이 되지 않는 css 도 강제로 상속시킴 inherit : 부모의 값을 자식도 똑같이 상속받겠다. 선택자 우선순위 우선순위란 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 css속성을 우선 적용할지 결정하는 방법 - 점수가 높은 선언이 우선 - 점수가 같으면 가장 마지막에 해석된 선언이 우선 !important; : 중요도, 매우 중요함! css에서 속성의 값 뒤쪽에 이걸 붙이면 이게 제일 중요하고 우선 순위 1등임 선언순서(코드 해석 순서)에.. 공감수 0 댓글수 0 2023. 8. 9.
css 선택자, 기본 선택자, 복합 선택자, 가상 클래스, 가상 요소 ::before, ::after, 속성 선택자 css 선택자 - 기본, 복합, 가상 클래스, 가상 요소, 속성 - 선택자는 뒤에서부터 해석해주면 이해가 쉽다 1. 기본 선택자 * 전체 선택자 : 모든 요소를 선택 abc 태그 선택자 : 태그 이름이 abc인 요소 선택 .abc 클래스 선택자 : html class 속성의 값이 abc인 요소 선택 #abc 아이디 선택자 : html id 속성의 값이 abc인 요소 선택 기본 선택자는 해당 순서대로 기억하기! 2. 복합 선택자 abcxyz 일치 선택자 : 선택자 abc와 xyz를 동시에 만족하는 요소 선택 abc > xyz 자식 선택자 : 선택자 abc의 자식 요소 xyz 선택 ex) ul > .orange { } abc xyz 하위(후손) 선택자 : 선택자 abc의 하위 요소 xyz 선택, '띄어쓰기'.. 공감수 0 댓글수 0 2023. 8. 9.
css 선택자, 속성, 선언 방식, 내장 방식, 링크 방식, 인라인 방식, @import 방식 선택자 { 속성 : 값 } 선택자 : 스타일(css)을 적용할 대상 (selector) 속성 : 스타일(css)의 종류 (property) ex) color : blue; css 선언 방식 - 내장 방식 - 링크 방식 - 인라인 방식 - @import 방식 1. 내장 방식 의 내용으로 스타일을 작성하는 방식 : html 내부에 작성 별도의 css 파일 만들지 않아도 html안에서 적용 가능하다는 장점이 있지만 css 내용이 많아진다면 쉽지 않다. 2. 링크 방식 로 외부 css 문서를 가져와서 연결하는 방식 병렬 방식으로 해석이 먼저 끝나는 css가 적용된다. 3. 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식으로 선택자라는 개념이 없다. 4. @import 방식 css의 @impor.. 공감수 0 댓글수 0 2023. 8. 9.
css position absolute, relative 로 라이언 만들기 공감수 0 댓글수 0 2023. 8. 1.
[ css fixed, sticky ]상단 고정, 상단바 고정, 헤더 고정, nav 고정 공감수 0 댓글수 0 2023. 8. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.