# CSS

clouood

이 주제에 대해 이야기 하기 전에, '시멘틱 태그(Semantic Tag)'와 '웹 표준'에 대해 생각해본 적이 있는지... 나는 사실 코딩에 발을 들이기 전에 이러한 용어가 있는지 전혀 몰랐다. 하지만 프론트엔드를 배우면서 새롭게 접하게 되었다. 먼저, 'Semantic Tag'란? 'semantic'이라는 용어는 영어사전 의미로 '의미의, 의미론적인'이라는 뜻을 가진다. 'Tag'는 HTML 문서에 사용되는 요소이다. 그렇기에 이 둘을 합친 'Semantic Tag'란 의미를 가지는 HTML 요소라고 이해하면 될 것이다. 예를 들면 header, nav, main, aside, footer 등이 있다. *이와 반대되는 개념 : Non-semantic Tag(의미가 없는...) Semantic Tag를 사용하는 이유 **1. SEO(search engine optimization : 검색

hyesuk_0703

쿠키를 사용해서 오늘 하루 보지 않기 팝업을 구현해 보겠습니다. 쿠키란? 이미지출처:https://raonctf.com/essential/study/web/cookie_connection 브라우저 쿠키는 웹 브라우저에서 사용되는 작은 데이터 조각입니다. 이 데이터는 웹사이트와 브라우저 간에 주고받을 수 있으며, 주로 사용자 경험을 개선하고 웹사이트에서 사용자를 식별하고 추적하는 데 사용됩니다. 서울시청 홈페이지 팝업구현 HTML CSS Javascipt jquery 쿠키 플러그인을 cdn을 사용하여 넣어주었습니다. jquery 소스는 testCookie가(쿠키) 생성되어 있지 않으면 layerPopupShow가 동작하여 layerPopupdms display blo

ynnnij

03-5 웹 페이지의 배경 꾸미기 background-attatchment : fixed background-attatchment는 배경 이미지의 고정 여부를 설정한다. fixed 는 배경 이미지를 고정하고 콘텐츠만 움직인다. 이미지의 기준점은 브라우저로 고정 기본은 scroll 이다. 배경은 요소 자체를 기준으로 고정되며, 요소를 따라 스크롤된다. 03-6 웹 페이지의 레이아웃 구성하기 > postion - 요소를 자유롭게 배치하기 pos

be_zion

px 픽셀 이미지를 확대했을 때, 보이는 사각형 어떤 CSS 단위를 사용하던지, 최종적으로 브라우저는 px로 계산한다. images, screens, borders에 사용 px 이미지 600px 은 항상 600px 이다. 모바일 기기에서는 의도한 디자인을 왜곡할수 있다. 크기 변경에 따라 이미지 품질이 달라진다. %를 사용해 max-width를 설정해 일부 화면에서 유동적으로 변경할수 있다. 가능한 모든 화면에 이미지를 사용할 경우, 여러 이미지를 사용해야 한다. px border 1px 이하의 border 를 가질수 없기 때문에 px을 사용해야 한다. em 컨테이너의 상대적인 값 사용 부모 엘레먼트의 크기를 알아야 한다. 최종 사이즈를 정확히 알수 없다. line-height int, float 이 필요하므로 em을 사용하지 않는다. em 사용을 지양한다. rem 👏🏻 기본 폰트 16px =

kimquaresma

margin(외부여백) 요소의 외부 여백(공간)을 지정하는 단축속성 *음수를 사용 할 수 있음 기본값 : 0 - 외부여백 없음 auto : 브라우저가 여백을 계산 가로(세로)너비가 있는 요소의 가운데정렬* 에 활용 단위 : px, em, vw 등 단위로 지정 margin: 1px; top, right, bottom, left margin: 1px 2px; top/bottom , left/right margin: 1px 2px 3px; top, left/right, bottom margin: 1px 2px 3px 4px; top, left, right, bottom padding(내부여백) 요소의 내부 여백(공간)을 지정하는 단축속성 기본값 : 0 - 내부여백 없음 단위 : px, em, vw 등 단위로 지정 % : 부모 요소의 가로 너비에 대한 비율로 지정

kimquaresma

단위 px : 픽셀 % : 상대적 백분율 em : 요소의 글꼴 크기 width:10em 이면, 요소의 폰트사이즈 * em으로 계산 ex) 부모요소의 font-size가 10px이면, 자식요소 width: 20em이 200px이 됨. rem : 루트 요소(html)의 글꼴 크기 em과 살짝 다르게, html에 들어가있는 폰트사이즈 기준으로 계산. vw : 뷰포트 가로 너비의 백분율 vh : 뷰포트 세로 너비의 백분율 1vh 또는 1vw는 100분의 1을 말함.

honee8583

CSS 개요 1. 기본문법 선택자 : css스타일을 적용할 대상(Selector) 속성 : 스타일(css)의 종류(Property) 값 : 스타일의 값(value) “div 태그를 찾아서 색상을 빨강으로 설정하겠다” “/* */”를 사용해 주석처리해 통해 메모를 작성할 수 있다. 2. 선언방식 내장 방식 링크 방식 인라인 방식 @import 방식 (1) 내장 방식 html내부의 style태그를 이용해서 내부에 스타일을 작성하는 방식이다. 유지보수 측면에서 단점을 보이기 때문에 권장하는 방식은 아니다. (2) 인라인 방식 요소의 style속성(전역속성)에 직접 스타일을 작성하는 방식이다.(선택자 없음) css 적용 우선순위가 매우 높아 css를 따로 작성하더라도 적용이 되지 않는 문제점이 있어 추천하지 않는다. (3) 링크 방식 link 태그로 외부 css

dnqkd707

시맨틱 ( Semantic , 의미 ) 태그 기존 영역 분할에 주로 사용되던 div, span 등의 태그는 태그 이름만 봤을 때 나눈다는 것 이외의 의미를 파악할 수 없음. -> 태그만 봤을 때 태그의 목적을 알 수 없어 id 또는 class를 반드시 추가해야 했다. 이런 문제점을 해결하고자 태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고, 웹 접근성(SEO)을 향상하는데 도움이 되는 시맨틱 태그가 추가됨. [ 제공하는 태그 ] header 태그 : 문서의 제목, 머리말 영역 footer 태그 : 문서의 하단 부분, 꼬리말, 정보 작성 영역 nav 태그 : 나침반 역할(다른 페이지, 사이트 이동)의 링크 작성 영역 main 태그 : 현재 문서의 주된 콘텐츠 작성 영역 section 태그 : 구역 구문을 위한 영역 article 태그 : 본문과 독립된 콘텐츠를 작성하는 영역 aside 태그 : 사이드바(보통 양쪽), 광고 영역

kimquaresma

width, height 요소의 가로 / 세로 너비 기본값 : auto 단위 : px, em, vw등 단위로 지정 span의 경우 인라인 요소로 아래와 같이 width, height가 포함한 콘텐츠 크기만큼 자동으로 줄어듬.(inline요소는 , Width / height값 줄 수 없음) div의 경우 블록 요소로 아래와 같이 width는 부모 요소의 크기만틈 자동으로 늘어나고, height의 경우 포함한 콘텐츠 크기만큼 자동으로 줄어들게 됨. max

kimquaresma

선택자 우선순위 상속 : 0점 전체선택자 : 0점 태그선택자 : 1점 class 선택자 : 10점 ID 선택자 : 100점 인라인선언 : 1000점 !imprtant : 999999999점 ex) { color: red !important; } 인 경우 999999999점(무조건 1순위)

kimquaresma

선택자(가상요소) >가상요소 선택자 사용시, content는 비우는 한이 있더라도 꼭 ""라도 입력하자. 즉, before/after는 content랑 한 세트라고 보면 됨 Before 선택자의 내부 앞에 내용(Content)을 삽입. ex)아래의 경우, div 뒤에 "앞!"이 붙어서 출력 됨. Before는 인라인(글자)요소 >앞! Content after before와 같은 매커니즘이지만, 요소의 내부 뒤에 삽입됨

xnelb013

만약 하나의 div의 class에 font-size가 적용되어있고 inline-style에도 font-size가 적용되어 있다면 어떤것이 우선적으로 적용될까? css선택자의 우선순위 인라인 스타일: 인라인 스타일은 요소에 직접 적용되는 스타일로, 가장 높은 우선순위를 가진다. ID 선택자: ID 선택자 (#)는 특정 ID를 가진 하나의 요소를 선택한다. 이 선택자는 인라인 스타일 바로 다음의 우선순위를 가진다. 클래스 선택자, 속성 선택자, 가상 클래스: 클래스(.), 속성([]), 및 가상 클래스(:) 등의 선택자들은 ID 선택자보다는 낮은 우선순위를 가진다. 요소(타입) 선택자와 가상 요소: 요소(또는 타입)와 가상 요소(::) 선택자들은 낮은 우선순위를 갖는다. 중요성 (!important): 모든 위 규칙보다 !important가 붙어있으면 가장 우선순위가 높아진다.

kjwboa

0. flex란? flex는 행과 열 형태로 배치하는 일차원 레이아웃 배치 속성이다. 기존에 사용하던 float이나 inline-block을 활용해서 레이아웃을 만드는 것보다 편리한 기능들을 제공한다. flex 레이아웃은 flex container라고 불리는 부모요소와 flex item이라 불리는 복수의 자식요소로 구성된다. flex의 속성들은 아래의 2가지로 나뉜다. flex 컨테이너(부모요소)에 적용하는 속성 flex 아이템(자식요소)에 적용하는 속성 1. 컨테이너에 적용하는 속성들 1.1 display: flex; > display:  flex  |  inline-flex flex를 사용하기 위해서 flex contain

riverhye

CSS animation @keyframes 요소에 from-to 혹은 0% ~ 100% 으로 애니메이션 동작 작성. ex. ` animation: name duration [timing-function] [delay interation-count] [direction] [fill-mode]; ` 필수 기입: 애니메이션 이름과 지속기간 JavaScript 1. 참조 방식 1.1. 내장 방식 코드가 일회성 or 짧음 1.2. link 방식 `` 코드가 길어질 때 or 재사용 1.3. 위치는 아무데나 가능 body 맨끝에 주로 2. 표기법 dash-case : CSS (단어 띄어쓰기) snake_case, camelCase, PascalCase : programming할 때 주로 사용하는 표기법들 > cf. 주석 한 줄 // 두 줄 이상 /* */

honee8583

1. 핵심 요소 정리 div(Division) 블록요소 특별한 의미가 없는 구분을 위한 요소이다. h1 - h6 (Heading) 블록요소 제목을 의미하는 요소 숫자가 작을수록 더 중요한 제목을 정의한다. (제목의 중요도를 생각해 숫자를 선택하면 된다) p (Paragraph) 블록요소 문장을 의미하는 요소 img (Image) 인라인요소 이미지를 삽입하는 요소 src : 이미지의 경로, alt : 이미지가 없을경우 표시할 대체 텍스트 (필수속성) ul (Unordered list) 블록요소 순서가 필요 없는 목록의 집합을 의미한다. ol 태그는 순서가 있는 목록이지만 자주 사용하지는 않는다. li (List Item) 블록요소

siyoung0123

한줄일때 > Lorem Ipsum is simply dummy ....... width 값을 꼭 지정해야 한다.!! , 으로 설정한다. https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow 두줄이상 > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy ... 을 하면 두줄이상이 될 수 없으므로 으로 변경 으로 설정한다.

jungmin211

CSS 애니메이션 > CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜주며 @keyframes를 활용하면 시간 순서대로 조절할 수 있는 애니메이션을 만들 수 있다 @keyframes @keyframes 옆에 애니메이션 이름을 적어주고 시간 진행에 따른 상태를 작성해주면 된다. 시간 진행에 따른 상태는 form, to로 CSS속성과 속성값을 적어주거나 0%, 100%로 작성해도 된다. %로 작성할 경우에 0~100사이의 소수점까지도 작성이 가능하다. 해당 키프레임 애니메이션을 적용하고 싶은 요소에 animation 속성으로 키프레임 이름을 적어주면 사용가능하며 애니메이션 이름 옆에 다양한 속성을 작성해야한다. animation 속성 > animation에 띄어쓰기로 animation-name, animation-duration, animation-delay, animation-direction, animation-iteration-count

eunjios

사용자 인터페이스 측면에서 상태에 따라 컴포넌트의 색상 등을 다르게 설정하는 것이 좋다. 그 예시로 Form 이라는 컴포넌트를 만들어서 상태에 따라 동적으로 컴포넌트를 스타일링 하는 방법을 알아보자. 기본적인 JSX는 다음과 같이 설정하였다. 이제 검색 버튼을 누르면 입력 값을 부모 요소로 전송하는 기능을 추가해보자. 다음과 같이 구현할 수 있다. 유저 입력 값을 state로 만든다. 입력 값이 달라질 때마다 state를 업데이트 한다. 검색 버튼을 누르면 state 값을 부모 요소로 전송한다. 마지막으로 동적 컴포넌트 스타일링을 위해 유저의 입력 값이 유효한지 확인하는 state를 추가하고 핸들러에 해당 로직을 추가한다. 스타일 지정 전 전체 코드 (Form.js) 이제 동적으로 컴포넌트 스타일을 변경해보자. (1) 인라인 스타일 가장 간단하게

xnelb013

px, em, rem의 차이 px (pixels): 픽셀은 디지털 화면에 표시되는 가장 작은 단위이다. 고정된 크기를 가지며, 따라서 다른 요소나 설정에 영향을 받지 않는다. em: em 단위는 상대적인 단위로, 해당 요소의 부모 요소의 글꼴 크기에 상대적이다. 예를 들어, 부모 요소의 글꼴 크기가 16픽셀이고 자식 요소의 글꼴 크기가 1em으로 설정되면, 자식 요소의 글꼴 크기도 16픽셀이 된다. 만약 자식 요소의 글꼴 크기가 2em으로 설정되면, 그것은 부모요소의 두 배인 32픽셀이 됩니다. rem (root em): rem도 상대적인 단위지만, HTML 문서 최상단 루트(root)요소()의 글꼴 크기에 기반한다. 이렇게 하면 사이트 전체에서 일관된 스타일링을 쉽게 유지할 수 있다. > 반응형 웹을 만들기 위해 어떤 길이 단위를 사용해야 할까? 내 생각은 rem이 가장 적절한 것 같다. rem의 기본

dpdnjs402

Media Query 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 🍉 media-type 화면 (screen) 티비 (tv) 프린터 (print) 🍉 논리연산자 and : 모든 쿼리가 참이여야 적용 not : 모든 쿼리가 거짓이여야 적용 only : 미디어쿼리를 지원하는 브라우저에서만 적용 🍉 미디어 특성 min-width (최소값) : 요소의 최소 너비를 설정 / 해당 값보다 작아지는 것을 방지 max-width (최대값) : 요소의 <span