본문 바로가기

CSS16

[CSS] vertical-align vertical-align vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정. vertical-align: baseline; 부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬 vertical-align: top; 해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬 vertical-align: middle; 해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬 vertical-align: bottom; vertical-align: sub; 해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬 vertical-align: text-top; 해당 엘리먼.. 2023. 4. 11.
[CSS]Grid Grid CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템. (flex와 비슷하지만 작은 요소들을 배치하는 것에 좀 더 유용함) columns, rows로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 gutters라고 부름. HTML에는 이렇게 div로 모눈종이 역할을 하는 공간들을 만들어줘야한다. Flexbox와 마찬가지로 컨테이너의 직계 자식 전체가 그리드 아이템이 됨. .container { display: grid; } 200픽셀 칼럼 3개를 추가한 예제 .container { display: grid; grid-template-columns: 200px 200px 200px; } fr 단위를 사용하여 그리드 행과 열을 가변적으로 조정 .container { d.. 2023. 1. 23.
[CSS]애니메이션 효과 주기 keyframe,transition 같은 속성들을 이용해서 애니메이션 효과를 줄 수 있다 ex)메뉴판 나타나기, 마우스 올리면 button 움직이기 /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); tran.. 2023. 1. 23.
[CSS]SASS +사용법 CSS 전처리 언어인 SASS CSS와 달리 조건문,반복문,변수,함수가 존재함 따라서 반복적인 부분이 쉽게 처리가 가능하다. 개이득 SASS는 CSS로 컴파일되거나 해석될 프리프로세서 스크립팅 언어. SCSS가 기존의 CSS 구문 위에 구축된 SASS의 주요 구문인 반면, SassScript는 그 자체로 스크립트 언어. CSS(Cascaded Style Sheets)와 같은 세미콜론과 괄호를 사용. SASS와 SCSS는 서로 가져올 수 있다. SASS는 실제로 수학과 변수 지원으로 CSS를 더 강력하게 만든다. SASS와 SCSS의 주요 차이점. SASS는 원본 구문이 필요할 때 사용되며, SCSS에는 코드 구문이 필요하지 않다. SASS는 엄격한 들여쓰기를 따르며, SCSS는 엄격한 들여쓰기가 없다. .. 2023. 1. 23.
[CSS]pseudo-elements(의사요소),ShadowDOM pseudo요소.. 발음은 수도라고 한다... (어려운 영어의 세계) 선택한 요소의 특정 부분을 스타일 지정할 수 있는 키워드. 앞에 콜론 두 개를 붙이는 것을 기억하자!! [pseudo class(:)와 구별하기 위해서 두 개 적용] 속성 요소들은 아래와 같다. (시범적 단계인 것은 제외함 , ::grammar-error, ::spelling error, ::target-text 속성들) ::after /*맨 마지막 부분에 특정 요소(글자, display 등) 추가*/ ::backdrop /* 뷰포트가 생성되면 특정 요소 추가 */ ::before /*맨 앞 부분에 특정 요소 추가*/ ::cue /*전체 신호 집합에 특정 요소 적용 ex) 비디오 - 홈페이지에 접속하자마자 예상치 못하게 영상이 재생되는.. 2023. 1. 22.
[CSS]IE 이전버전과 호환하기 display : flex는 Internet Explorer 10 이하!!부터는 지원이 안.된.다 IE7~9버전을 사용하는 유저들도 있기에 호환이 되도록 수정을 해.야.된.다 어떻게 깨지는 지 확인하려면 윈도우10일 경우 : 검색창에서 internet explorer를 검색 윈도우11일 경우 : internet explorer 11 버전 설치 그 다음 아무튼 인터넷 익스플로러 11버전을 킨 후 마우스 우클릭 - 검사를 누르면 크롬 개발자 도구와 유사한 메뉴들이 뜸, 거기서 에뮬레이션 탭으로 들어가면 예전 IE 브라우저에서 미리볼 수 있다. 이를 해결하기 위해서는 IE를 위한 CSS파일을 만들어야된다!! 이것을 head태그에 적용 (태그 첨부순서는 가장 마지막 줄이 좋음, 하단에 적용된 태그일수록 우선순위.. 2023. 1. 19.
[CSS]background 태그로 배경넣기 background image : 경로 설정 background-size : 사이즈 설정 (기본 설정으로는 이미지가 크기보다 작을시 repeat /반복 됨) cover : 이미지 짤려도 되지만 박스에 다 적용 contain : 이미지 짤리면 안되니까 남는공간은 여백으로 남겨두고 적용 background-repeat : 기본값인 repeat을 n -repeat으로 재설정 background-position : 배경위치 조정 background-attachment: 스크롤시 배경 위치 조정 가능 filter: 이미지에 보정 입힘 (단, 내부에 글자 있으면 모두 포함되어 보정됨) 구성 속성은 아래와 같다!! background-attachment background-clip background-color ba.. 2023. 1. 16.
[CSS]flexbox flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공 문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부름 flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 됨 flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬 -출처 MDN- 화면사이즈에 대해서 유동적인 flexbox (flexible 생각하면 쉽군) children1 children1 children1 부모태그안에 있는 자식태그들한테 적용!!! (display : f.. 2023. 1. 13.
[CSS]position,z-index position CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정 // 출처 : MDN position 지정을 해야 좌표변경이 가능! position 배우기 전에 짚고 넘어가자!! relative : 위치하고 있는 자리를 기준에서 이동 absolute : 부모의 절댓값을 기준으로 이동 (화면의 절댓값으로 생각하면 됨. ) static : 웹브라우저의 기본값 (default 값) 당연히 top,bottom,left,right 값 조절 X fixed : 스크롤바를 움직여도 절대적으로 고정됨 -> 광고배너에 흔히 쓰임 sticky : 다른 요소는 이.. 2023. 1. 13.
[CSS] 샾'#'과 마침표'.' 의 차이, 아이디와 클래스 CSS에서 # id : 선택자로 지정할 때 사용 . class : 값을 선택자로 지정할 때 사용 클래스와 id의 기능은 동일하지만 적용할 수 있는 범위가 다름 id class # 샾 . 마침표 #id_name{속성명: 속성값; 속성명:속성값;} .class_name{속성명:속성값;} 동일한 값 사용 불가 동일한 값 사용 가능 한 아이디당 한 페이지만 사용 가능 한 요소에 두 개 이상 사용 가능 (띄어쓰기로 구분) 한가지만 적용하고 싶을 때 유용 여러가지 스타일링을 한꺼번에 적용할 때 유용 /* CSS */ #identified { background-color: skyblue; } 특별한 ID를 가진 요소에요! 이건 그냥 div에요. 위의 예제는id /* CSS */ .red { color: #f33; .. 2023. 1. 4.
[CSS] HTML에 적용하기 + 우선순위 CSS(Cascading Stylesheets – 종속형 스타일시트) 를 HTML에 적용하는 방법 Inline style 인라인 스타일 시트: html 태그 속성에 입력 스타일 적용 태그 즉시 확인 가능 한번에 하나의 태그에만 적용 가능 전체 코드 가독성 나쁨 관심사 분리 불가능 예를 들어서 p태그에 적용하면 그 다음에 생성되는 p태그에는 모두 같은 CSS가 적용되는 것을 주의!! 따라서 어떤 태그에 공통적인 스타일을 주고 싶을 때 주로 사용한다. 안녕하세요. Hello. body { display: contents; } Internal style 내부 스타일 시트 : External style 외부 스타일 시트 : CSS 파일 만들어 불러오기 전체 코드 가독성 향상 유지보수 용이 태그와 CSS 연결 필.. 2023. 1. 4.
[CSS] 공책처럼 줄 바탕 넣기 - linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient linear-gradient() - CSS: Cascading Style Sheets | MDN The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of . developer.mozilla.org linear-gradient(90deg, transparent 7.. 2023. 1. 3.
[CSS]정렬에 쓰이는 속성 display,float display : 화면에서에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정 none: 화면에서 보이지 않음. 크기를 차지 하지도 않는다. flex: 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정 block: 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치(가로행을 모두 차지함) inline : 컨텐츠를 감쌀 정도의 크기. 한 줄에 모두 나열(컨테이너 블록의 상단에서 하나씩 차례로 수평으로 배치).가로 다 차지 inline-block : inline과 block의 특성을 합쳐놓은 속성, inline의 속성이지만 크기 변경이 가능.해당 요소만큼만 가로 크기 차지 *display:block을 기본값으로 갖.. 2022. 12. 16.
[CSS]선택자 CSS 선택자(Type selectors) 는 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴 https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors CSS 선택자 - Web 개발 학습하기 | MDN CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합 developer.mozilla.org 이제 선택자에 대해서 알아보자!! 복합선택자 일치선택자 /* 두가지 조건을 동시에 만족하는 요소 선택 */ span.c.. 2022. 12. 16.
[CSS] 주요속성 display 속성은 이 링크로 ㄱㄱ https://hans-j.tistory.com/61 [CSS]정렬에 쓰이는 속성 display display : 화면에서에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정 none: 화면에서 보이지 않음. 크기를 차지 하지도 않는다. flex: 하나의 플렉스 아이템이 자 hans-j.tistory.com width, height Hello, World! .paragraph { width: 500px, height: 500 px; } .width 속성 : 선택한 요소의 넓이를 설정 .height 속성 : 선택한 요소의 높이를 설정 고정값은 px, 가변값은 %로 표기 width에 padding, margin값을 포함하고 싶다면?! -> bo.. 2022. 10. 3.
[CSS] CSS의 기초 Cascading Style Sheet 를 의미하는 CSS는 HTML으로 작성된 정보를 꾸며주는 언어 CSS의 구성 요소 : { 속성 : 속성값; } 선택자 : 디자인을 적용할 HTML의 영역 속성 : 어떤 디자인을 적용할지 정의 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것 CSS 연동방법 Inline Style Sheet : 태그 안에 직접 원하는 스타일 적용 coding 101 Internal Style Sheet : 태그 안에 넣기 h1 { background-color: yellow;} External Style Sheet : 태그로 불러오기. 가독성이 높고 유지보수가 수월 CSS 선택자 Type Selector : 특정태그에 스타일 적용 h2 { color: red; } Clas.. 2022. 10. 3.

티스토리툴바