본문 바로가기

Web/CSS28

[CSS] link & import 1. link : 디자인(CSS)이 동일한 html 파일이 여러개 있을 때 css 파일을 따로 두어 한번에 스타일을 변경시키고 싶을 때 사용 [사용법] CSS 파일을 만들어준다. head 부분에 를 작성해준다. 2. import : link와 사용하는 이유는 동일하지만 사용법이 다르다. [사용법] 아래의 이미지와 같이 style 태그 안에 import를 사용해서 css 파일을 연결할 수 있다. 3. link vs import [link] 장점 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지보수에 용이하다. 직렬 방식이 아닌 병렬방식으로 다운로드를 하여 로딩속도가 빠르다. [import] 장점 하나의 css파일에 여러개의 페이지 css를 로드시켜 편리하다 단점 import를 많이 사용하면.. 2023. 5. 23.
[CSS] transition 1. transition이란 : CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. : 속성 변경이 즉시 일어나게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 2. transition의 속성들 transition : transition을 적용할 속성을 작성한다. : transition을 적용할 속성과 지속될 시간을 설정한다. transition: height; transition: all 0.1s; transition-timing-function : 전환 효과의 시간당 속도를 설정한다. linear: 전환 효과가 처음부터 끝까지 일정한 속도로 진행된다. ease: 기본값으로, 전환 효과가 천천히 시작되어, 그 다음에는 빨라지고, 마지막에는 다시 느려진다. .. 2023. 5. 19.
[CSS] transform 1. transform 이란 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성이다. 2. transform의 속성 도형에 커서를 올리면 transform이 실행됩니다. rotate(45deg) rotateX(45deg) rotateY(45deg) scale(1.5) scaleX(1.5) scaleY(1.5) skew(45deg, 45deg) skewX(45deg) skewY(45deg) translate(45px, 45px) translateX(45px) translateY(45px) 3. transform-origin 2023. 5. 17.
[CSS] blend 1. blend란? : 두개의 이미지 또는 그 이상을 겹쳐놨을 때 다른 색상 차이를 혼합해서 생각지도 못한 효과를 만들어내는 것을 말한다. 2. blend 활용 배경 색상과 배경 이미지를 blend로 혼합해보자. 아래의 코드처럼 배경 색상은 빨간색이고 배경 이미지는 산일 때 background-blend-mode를 사용하면 아래와 같은 결과가 나온다. 배경 색상을 변경하거나 background-blend-mode의 속성을 변경하면 다른 느낌의 이미지를 만들 수 있다. 3. blend의 프로퍼티 요소 설명 normal 기본값, 색상 혼합이 적용되지 않고 상단에 위치한 요소의 색상으로만 표시된다. color 겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조와 채도를 가지되 뒤쪽 요소의 명도를 반영하여 혼합하여 표.. 2023. 5. 17.
[CSS] filter 1. filter : filter속성은 요소에 대한 시각효과를 지정한다. (예시로 blur와 같은 것) none : 기본값으로, 이펙트를 없앤다. grayscale(%) : 이미지를 회색조로 변환시킨다. : 0%가 기본값, 100%는 이미지를 완전 회색처리한다. (음수는 없다.) sepia(%) : 이미지를 세피아톤으로 변환시킨다. : 0%가 기본값, 0~100% saturate(%) : 이미지 채도를 지정한다. : 0%는 이미지의 채도를 완전히 없앤다. 100%가 기본값이다. 100%를 넘기면 채도를 높인다. hue-rotate(deg) : 이미지 색조 회전을 적용시킨다. : 0deg~360deg invert(%) : 이미지 색상을 반전시킨다. : 0%는 기본값, 100%는 완전히 반전시킨다. opac.. 2023. 5. 15.
[CSS] background background-color : 배경 색상을 부여하는 속성 background-color: ; background-image : 배경 이미지를 부여하는 속성 background-image: url(''); background-repeat : 배경(이미지)의 반복여부를 결정할 수 있는 속성 repeat: 기본값, x와 y축 모두 반복 repeat-x: x축으로만 반복 repeat-y: y축으로만 반복 no-repeat: 반복하지 않음 background-repeat: ; background-attachment : 배경(이미지)의 스크롤 여부를 결정할 수 있는 속성 fixed: 배경 이미지는 스크롤 되지 않는다. scroll: 기본값, 배경 이미지도 같이 스크롤 된다 background-attachment.. 2023. 5. 15.
[CSS] float 1. float란? float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어준다. 하지만 현재 float는 웹 페이지의 레이아웃(Layout)을 작성할 때 자주 사용된다. 보통의 신문, 잡지등에서 이미지를 사용할 때는 이미지 옆에 글이 같이 나온다. 하지만 현재 아래의 코드를 사용하면 이미지 아래에 텍스트가 나오게 된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto reiciendis odio eius soluta dicta ut doloremque recusandae. Impedit accusamus doloremque ipsa, repellendus, hic adipisci non, enim eveni.. 2023. 5. 15.
[CSS] media query 1. media query 기본 : 미디어 쿼리는 CSS 문법 중 하나이며, 반응형 디자인을 사용할 수 있도록 해준다. 반응형 디자인이란 화면에 능동적으로 반응해서 최적화 된 모습을 보여주는 것이다. 미디어 쿼리의 문법 @media (조건) { /*...*/ } /* 사용 예시 - 브라우저의 넓이가 500px 보다 작으면 body의 배경색을 red로 변경한다. */ @media (max-width:500px){ body{ background-color: red; } } 💡 미디어 쿼리를 여러개 사용할 때는 순서를 중요하게 생각해야한다. 케스케이딩 때문에 나중에 나온 것이 우선 순위가 높아진다. "따라서 겹치는 구간이 있을 때는 더 낮은 구간이 우선순위가 높아질 수 있도록 나중에 작성해주어야한다." 미디어.. 2023. 5. 11.
[CSS] Multi column 1. Multi column이란? : 아래와 같이 신문같은 자료에서 글이 많은 경우 column(열)을 여러개로 나누어서 글을 읽기 쉽게 하는 것이 바로 Multi-column이다. 2. column 속성들 column-count 입력된 숫자에 따라서 열을 나눈다. column-width 입력된 숫자의 넓이 만큼 열을 나눈다. 브라우저의 크기가 줄어들면 숫자의 넓이를 유지하기 위해서 단의 개수가 조절된다. 💡column-count와 column-width의 관계💡 column-count와 column-width을 같이 사용하면 column-count에 주어진 값 이상의 단락이 생기지 않는다. 다만 브라우저 크기가 줄어들면 단락의 개수는 줄어든다. column-gap 단락끼리의 간격을 조절할 수 있는 속성.. 2023. 5. 11.
[CSS] flex 1. flex flex를 사용하기 위해서는 아래의 두 단계 코드가 있어야한다. container와 item이라는 태그가 있는 것이 아니고 해당 역할을 하는 부모, 자식 태그가 있어야한다는 의미이다. container와 item에 부여해야하는 속성 container item 속성 display order flex-direction flex-grow flex-wrap flex-shrink flex-flow flex-basis justify-content flex align-items align-self align-content display: flex; flex를 사용하기 위해서는 바깥쪽에 있는 container에 display: flex;를 작성해주어야한다. flex-direction flex-direct.. 2023. 5. 10.
[CSS] position position이란 태그들이 화면상에 어디에 위치할 것인가를 결정하는 것 1. offset 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨저져 있는지 지정한다. right 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨저져 있는지 지정한다. top 기준 위치와 요소 사이에 위쪽으로 얼마나 떨저져 있는지 지정한다. bottom 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨저져 있는지 지정한다. 2. position 종류 설명 static 문서의 흐름에 맞춰 배치한다. 기본값이다. relative 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다. absolute relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다. fixed 브라우저 창을 기준으로 위치를 배치한.. 2023. 5. 9.
[CSS] margin 겹침 1. 마진겹침(h1끼리) 아래의 코드로 작성하고 살펴보면 아래의 이미지와 같은 주황색부분(마진)이 겹치는 현상이 나타나는데 이것을 마진겹침이라고 한다. hello world! hello world! 이상적으로는 첫번째 hello world!와 두번째 hello world! 사이의 간격이 100px이어야한다. 하지만 위의 이미지를 보면 100px로 설정되어 있다. 왜그럴까? 마진은 위 아래로 마진이 서로 만날때 첫번째 hello world!의 마진값과 두번째 hello world! 의 마진 값중 큰 값으로 합쳐진다. 이렇게 된 이유는 여러 요소를 세로로 배치할 때 맨위의 마진과 아래의 마진에 비해 중간에 있는 마진이 지나치게 커지는 것을 방지하기 위함이다. 2. 마진겹침(부모와 자식) hello world.. 2023. 5. 9.
[CSS] box-sizing 1. box-sizing이란 width와 height는 기본적으로 콘텐츠 영역을 기준으로 설정이된다. 즉, 마진, 패딩, 테두리가 얼마인지와 상관없이 width와 height는 콘텐츠 영역에만 적용이 된다. box-sizing 적용 전 사진을 보면 콘텐츠 영역을 기준으로 width가 적용되어 small과 large의 width가 다르게 보인다. (콘텐츠 영역의 width만 적용되었기 때문이다.) 이 문제를 해결하기 위해서는 box-sizing을 사용해야한다. box-sizing: border-box를 설정한다면 테두리가 기준이 되어 width를 적용받게 된다. 따라서 아래의 사진을 보면 small과 large의 width가 같게 보인다. /* 적용 전 */ hello hello /* 적용 후 */ hel.. 2023. 5. 8.
[CSS] box-model ⭐️⭐️⭐️ 박스모델이란? : 모든 HTML요소는 박스(box)모양으로 구성되며, 이것을 box-model이라고 한다. : 웹 문서 안에서 여러 요소를 원하는 위치에 배치하려면 CSS 박스모델을 잘 알고 있어야한다. 박스 모델의 기본 구성 콘텐츠 영역(content): 텍스트나 이미지가 들어 있는 박스의 실질적인 부분 패딩(padding): 내용과 테두리 사이의 간격, 눈에 보이지 않는다. 테두리(border): 내용과 패딩 주변을 감싸는 테두리 마진(margin): 테두리와 이웃하는 요소사이의 간격 2023. 5. 8.
[CSS] inline-level, block-level inline-level과 block-level inline-level: 콘텐츠만큼만 영역을 차지하는 것 (코딩) block-level: 혼자 한줄을 다 차지하는 것 (hello world!) 이렇게 항상 고정되어있냐? 그건 아니다 아래의 방법으로 level을 변경시킬 수 있다. 2023. 5. 8.
[CSS] Emment 단축키 1. HTML 표준문서 생성 "!"치고 "tab" 또는 HTML 입력후 HTML5 선택 2. 하위 요소 생성(>) 3. 동급 요소 생성(+) 4. 반복 태그 생성(*) 5. class와 id 설정(.)(#) 6. 그룹화(()) 7. 속성 [attribute]있는 태그 ([]) 8. 텍스트가 있는 태그({}) 9. 넘버링($) https://www.hanl.tech/blog/emmet-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%B0%8F-%ED%8A%B8%EB%A6%AD-9%EA%B0%80%EC%A7%80/ 2023. 5. 8.
[CSS] 케스케이딩 1. 케스케이딩이란? : 스타일 시트에서는 우선순위가 위에서 아래로(계단식) 적용된다는 의미 : 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙 2. 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 얼마나 중요한가? ☝🏻 사용자(user)가 지정한 스타일 ✌🏻 제작자(auther)가 지정한 스타일 🤟🏻 웹 브라우저(browser)가 기본으로 정해놓은 스타일 적용범위는 어디까지인가? [1순위] !important: 어떤 스타일보다 우선 적용하는 스타일이다. ([ex] li {... !important;}) [2순위] 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용한다. ([e.. 2023. 5. 7.
[CSS] 상속 1. 상속이란? : 태그를 디자인할 때 어떤 효과를 주게되면 해당 태그의 하위 태그가 그 효과를 이어 받는 성질 수업내용 html css javascript 1번 코드에서 텍스트의 색상을 변경 시키려면 어떻게 해야할까? 2번 코드처럼 li와 h1태그 모두에게 색상을 부여할 수 있다. 다른 방법도 있다. 1번 코드의 최 상위 부모 태그에게 색상을 부여하면 하위 모든 태그들의 색상이 변경된다. 최 상위 부모 태그는 무엇일까? 이다. 따라서 3번 코드로 색상을 부여하면 모든 태그의 색상이 변경된다. 2. 상속 되는 속성 vs 상속 되지 않는 속성 상속 되는 속성 color font line-height text-align white-space visibility opacity 상속 되지 않는 속성 width .. 2023. 5. 7.
[CSS] 웹 폰트 구글 웹 폰트: https://fonts.google.com/?authuser=1 네이버 웹 폰트: https://hangeul.naver.com/font [구글이나 네이버에서 폰트를 제공해주는 경우] 1. 마음에 드는 폰트를 선택한다. 2. 웹 폰트 url을 복사해서 head에 작성해준다. 3. CSS로 글꼴을 선택해준다. 안녕하세요! [구글이나 네이버에서 폰트를 제공해주지 않는 경우] 1. 폰트 파일을 다운로드 하고 html 파일에 넣어준다. 2. font face 속성을 이용해서 웹 폰트를 정의해준다. @font-face{ font-family: ; src: ; } 2023. 5. 6.
[CSS] font 1. font-family(글꼴 지정) font-family: 2. font-weight(굵기) font-weight: normal: 기본값, 보통 굵기 bold: 굵게 bolder: 원래보다 더 굵게 lighter: 원래보다 더 가늘게 100~900: 100은 가장 가늘게, 900은 가장 굵게 3. line-height(줄 간격) line-height: px: 고정된 값 숫자: 해당 숫자의 배수만큼 상대적으로 간격이 생긴다. 4. letter-spacing, word-spacing letter-spacing: 글자와 글자의 간격을 조절한다. word-spacing: 단어와 단어 사이의 간격을 조정한다. 5. font(축약형) font: font는 위의 있던 속성들을 한번에 작성하는 축약형 코드이다. 순.. 2023. 5. 6.
[CSS] text-align 종류 설명 start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다. end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. left 왼쪽에 맞추어 문단을 정렬한다. right 오른쪽에 맞추어 문단을 정렬한다. center 가운데에 맞추어 문단을 정렬한다. justify 양쪽에 맞추어 문단을 정렬한다. match-parent 부모 요소에 따라 문단을 정렬한다. https://webstoryboy.co.kr/1677 2023. 5. 6.
[CSS] Color color: 1. 16진수로 표현하는 방법 6자리의 16진수는 앞에서부터 두 자리씩 묶어서 #RRGGBB로 표시한다. 여기서 RR자리에는 빨간색, GG자리에는 초록색, BB자리에는 파란색의 양을 표시한다. 16진수는 외운다기 보다는 이전에 설정했던 색상이 무슨색인지 파악하고 그 색상을 다른 곳에 적용하는 과정에서 복사 붙여넣기 하면서 많이 쓰인다. color: #FF0000 2. hsl과 hsla로 표현하는 방법 hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말이다. (a는 alpha로 불투명도를 줄 수 있는 값이다.) color: hsl(0, 100%, 50%) color: hsla(0, 100,%, 50%, 0.5) 3. 영문으로 표현하는 방법 해당 방법은 영문으.. 2023. 5. 6.
[CSS] font-size 1. px vs rem 아래의 사진은 아래의 코드로 웹 페이지를 폰트 사이즈를 설정하고 웹 사이트의 폰트 사이즈를 변경했을 때 나타난 결과이다. [해당 사진의 결론] px는 폰트 사이즈가 고정되어 있지만 rem은 사용자의 설정에 따라서 폰트사이즈가 변경된다. px rem [rem과 폰트 사이즈의 관계] 1. 글꼴 크기: 아주 작게 - 1 rem = 9px - 2 rem = 18px - 3 rem = 27px 2. 글꼴 크기: 작게 - 1 rem = 12px - 2 rem = 24px - 3 rem = 36px 3. 글꼴 크기: 중간 - 1 rem = 16px - 2 rem = 32px - 3 rem = 48px 4. 글꼴 크기: 크게 - 1 rem = 20px - 2 rem = 40px - 3 rem =.. 2023. 5. 6.
[CSS] 구조 가상 클래스 1. 특정 위치에 자식 요소 선택하기 :only-child 부모 안에 자식 요소가 하나뿐 일때 자식 요소를 선택한다. A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택한다. :first-child 부모 안에 있는 모든 요소 중에 첫 번째 자식 요소를 선택한다. :last-child 부모 안에 있는 모든 요소 중에 마지막 번째 자식 요소를 선택한다. A:first-of-type 부모 안에 있는 A 요소 중에서 첫 번째 자식 요소를 선택한다. A:last-of-type 부모 안에 있는 A 요소 중에서 마지막 번째 자식 요소를 선택한다. :nth-child(n) 부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택한다. :nth-last-child(n) 부모 안에 있는 모든 요소 중에서.. 2023. 5. 3.
[CSS] 속성 선택자 ❗️ {... }❗️ 1. 특정 속성이 있는 요소를 선택하는 [속성] 선택자 :속성값에 따라 원하는 요소를 선택하여 스타일을 지정할 때 사용 ❗️ a[속성]{... }❗️ 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 2. 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자 : 주어진 속성값이 일치하는 요소를 찾아서 스타일을 지정할 때 사용 HTML CSS Selector Level 3 미디어쿼리 3. 여러 값중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성~=값] 선택자 :여러 속성값 중에서 해당 속성값이 포함된 요소를 선택하여 스타일을 지정한다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 4. 특정 속성값이 포함된 속성 요소를 선택하는 [속성 | 값] 선택자 : 특정 속성값이 포함된 속.. 2023. 5. 3.
[CSS] 연결 선택자 1. 하위(자손) 선택자 : 부모 요소에 포함된 하위 요소를 모두 선택한다. 즉, 자식요소뿐만 아니라 손자 요소, 손자의 손자 요소등 모든 하위 요소까지 적용된다. ❗️A B{ ...}❗️ HTML CSS JavaScript HTML CSS HTML2 CSS2 JavaScript ❗️{ ... }❗️ 3. 인접 형제 선택자 ❗️A+B{ ... }❗️ 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일 4. 형제 선택자 ❗️A~B{ ... }❗️ 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx).. 2023. 5. 3.
[CSS] 가상 클래스 선택자 가상 클래스 선택자 : 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있다. [사용자 동작에 반응하는 가상 클래스] 1. 방문하지 않은 링크에 스타일을 적용하는 link 2. 방문한 링크에 스타일을 적용하는 visited 3. 특정 요소에 마우스 포인터를 올려 놓으면 스타일을 적용하는 hover 4. 웹 요소를 활성화했을 때 스타일을 적용하는 active 5. 웹 요소에 초점을 맞추었을 때 스타입을 적용하는 focus 방문함 방문안함 [요소 상태에 따른 가상 클래스] 1. target : 같은 문서안에서 다른 위치로 이동할 때는 앵커를 이용한다. 이때 target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다. 2... 2023. 5. 1.
[CSS]기본 선택자 1. 전체 선택자 : 문서의 모든 요소에 스타일을 적용한다 ❗️*{ ... }❗️ HTML CSS JavaScript 2. 태그(타입) 선택자 : 특정한 태그(타입)를 사용한 모든 요소에서 스타일을 적용한다. ❗️태그{ ... }❗️ HTML CSS JavaScript 3. 아이디 선택자 : 특정 부분만 선택해서 문서 안에서 한 번만 적용된다. ❗️#아이디{ ... }❗️ HTML CSS JavaScript 4. 클래스 선택자 : 특정 부분만 선택해서 문서안에 여러 번 적용한다. : id 선택자를 여러개 사용한 것과 같은 결과지만 클래스 선택자는 id 대신 class, # 대신 .을 사용한다. ❗️.클래스명{ ... }❗️ HTML CSS JavaScript 5. 그룹 선택자 ❗️A, B{ ... }❗️.. 2023. 4. 30.

티스토리툴바