# htmlcss

dkzks44

transform : 원근법 / 이동 / 크기 / 회전 / 기울임 2D 변환함수 translate(x,y) : 이동 x축,y축 translateX(x) : 이동 x축 translateY(y) : 이동 y축 scale(x,y) : 크기 x축,y축 rotate(degree) : 회전(각도) skewX(x) : 기울임(x축) skewY(y) : 기울임(y축) 3D 변환함수 perspective(n) : 원근법(거리), 요소의 관찰 대상에게 이 속성을 부여한다. 부모면 부모 자식이면 자식에게. 적용할 때에는 무조건 속성들 중 맨 앞에다가 적어야 함. rotateX(x) : 회전(x축) rotateY(y) : 회전(y축)

dkzks44

- transition 요소 전환 효과를 지정하는 단축 속성. transition : 속성명 지속시간(필수) 타이밍함수 대기시간 // transition-property = 속성명 all 입력 시 모든 전환효과에 적용. 특정 효과만 적용 원하면 그거만 입력. ex) width → width에만 전환효과 적용. transition-duration = 지속시간 해당 속성의 지속시간 설정. transition-timing-function 이런 느낌의 타이밍 설정 가능. 참고 사이트들 https://easin

dkzks44

order : flex를 통해 배치되는 순서, 숫자가 낮을 수록 앞에 배치가 됨. flex-grow : item의 증가 너비 비율, 기본값 0 flex-shrink : item의 감소 너비 비율, 기본값 1, 1인 경우 비율을 유지하기 위해 container 크기가 줄면 덩달아 item들의 크기도 1:1:1 비율에 맞춰 줄어듬. 0을 부여하면 container의 크기과 관계없이 줄어들지 않고 그대로 크기를 유지한다. flex-basis

dkzks44

픽셀(px) 절대 단위(어떤 pc냐에 따라 상대적이긴 하나 보통의 경우 절대적) % 상대적 백분율 em 요소의 글꼴 크기 기준 rem 루트 요소(html 뿐 아니라 부모 요소의 설정에도 바뀔 수 있음.)의 글꼴 크기 기준 vw 뷰포트 가로 너비의 백분율 vh 뷰포트 세로 너비의 백분율 Position relative : 요소 자신을 기준으로 배치! absolute : 부모 기준으로 배치(relative인 경우, 아닐 경우 뷰포트 기준)

dkzks44

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 → 점수가 높은 선언 우선. → 점수가 같으면 가장 마지막 해석된 선언 우선. 상속 - X 전체 선택자(*) - 0점 태그 선택자(div, span 등) - 1점 Class 선택자 - 10점 ID 선택자 - 100점 inline 선언 - 1000점 !important - 999999999점 ex) .list li.item { } 의 경우 class 선택자(10) / 태그 선택자(1) / class 선택자(10) 해서 총 21점 .list li:hover{ } 의 경우 class 선택자(10) / 태그 선택자(1) / 가상 class 선택자(10) 해서 총 21점

dkzks44

A:: 가상 요소 선택자 { } 형태로 사용. 콜론 하나만 붙여도 동작은 하나 정확하게 웹표준은 아님 before선택자 요소 내부 앞에 내용(Content) 삽입. 삽입 된 내용은 “인라인 요소”로 만들어 진다. 삽입하는 내용을 반드시 명시해야 하기에 속성으로 content를 무조건 가지고 있어야 한다. after 선택자 요소 내부 뒤에 내용(Content) 삽입. 마찬가지로 삽입 된 내용은 인라인 요소로 만들어 진다. 삽입하는 내용을 반드시 명시해야 하기에 속성으로 content를 무조건 가지고 있어야 한다. ex) content가 없는 특정 크기의 box를 after 선택자를 이용해 넣으려면… .box::after {

crous1

HTML > 마크업 언어(Markup Language)는 텍스트를 구조화하고, 텍스트와 관련된 메타데이터를 정의하는 데 사용되는 언어입니다. >HTML(HyperText Markup Language)이 가장 대표적인 예시입니다. HTML은 웹 페이지의 구조를 정의하는 데 사용되며, 다양한 태그를 사용하여 텍스트, 이미지, 링크 등의 요소를 배치하고 스타일링합니다. Visual Stduio Code 설치 설치주소 VSCode Extension Live Server - 저장된 파일을 실시간으로 확인할 수 있는 기능 TAG - 제목 ( Heading) - 본문 ( Paragraph) - 버튼 - 링크 ( anchor ) - 리스트 ( ordered list ) - 리스트 ( unordered list ) -

0dytpq0

https://getbootstrap.kr/docs/5.1/components/buttons/ <- 스타터 템플릿 코드 복사해서 붙여넣으면 쉽게 사용 가능 여러 기능들이 있는 bootstrap을 이용해서 쉽게 반응형 레이아웃을 제작할 수 있음. fixed width container (responsive fixed layout) responsive fixed layout(반응형 고정폭 레이아웃)을 만들 때 사용한다. Media query에 의해 반응형으로 동작하며 동일 breakpoint내에서는 viewport 너비가 늘어나거나 줄어들어도 고정폭을 갖는다. full width container (fluid layout) fluid layout(유동 최대폭 레이아웃)을 만들 때 사용한다. viewport 너비에 상관없이 언제나 콘텐츠 요소를 화면에 꽉차는 너비를 갖게 한다. 앞에서 설명한 .container와 .container-fluid는 콘텐츠 요소를 포함하

0dytpq0

표 관련 태그 : table > tr(줄,행)/ caption(table의 제목) > td(칸,열) , th(table의 head를 구분지을 떄 사용 = text-align center랑 font-weight bold 기본적용) 표의 병합 colspan = "합쳐지는 행의 개수" 가로의 병합 rowspan = "합쳐지는 열의 개수" 세로의 병합 병합되는 행,열 주석으로 처리하든지 지우기 표의 구조(의미) 표의 구조(의미) table머리 table머리

kungfuk11

레이아웃 부트스트랩은 Fixed 레이아웃과 Fluid 레이아웃을 모두 지원합니다. Fixed 레이아웃은 고정된 너비를 사용하는 레이아웃입니다. 반면에 Fluid 레이아웃은 특정 화면 크기에 따라 레이아웃 전체 크기가 변화합니다. 툴바 툴바는 웹 페이지 상단에 위치하는 구성 요소입니다. 툴바로 레이아웃처럼 일반 일반형 툴바와 고정형 툴바 2가지 형태가 있습니다. 부트스트랩에서 일반형 툴바를 만들때는 아래의 코드처럼 navbar 클래스를 가진 div 태그를 입력합니다. 고정형 툴바를 생성할때는 아래의 코드처럼 입력합니다. 🤔그런데 일반 데스크톱 웹 브라우저 화면에서 내용의 일부분이 툴바에 가려집니다. 이는 툴바의 position 속성에 fixed 키워드가 적용되어 나타나는 현상입니다. 따라서 body 태그에 padding-top 속성을 사용해 내용이 특정 크기만큼 상단에서 떨어지게 만듭니다. 툴바 버튼 또한 버튼에 dropdown 클래스를 사용하고 내부 요소를

kungfuk11

정적 그리드 시스템 그리드 시스템은 미리 정의된 스타일시트로 같은 격자 위에 요소를 배치할 수 있게 하는 것을 의미합니다. 이때 정의된 스타일 자체를 그리드 시스템이라고 부르기도 합니다. 동적 그리드 시스템 CSS3 그리드 레이아웃 css3에서는 레이아웃을 구성할 때 사용할 수 있는 전용 속성을 추가했습니다. 바로 Flex속성과 Grid 속성입니다. 😢하지만 Flex 속성과 Grid 속성은 모든 인터넷 익스플로러 버전에서 사용 불가능하거나 불완전하게 지원합니다. 그래도 앞으로 사용될 가능성이 높으므로, 어떤 느낌인지 살펴보도록 합시다. ❗️일단 CSS3 그리드 레이아웃을 사용하려면, 다른 요소를 감싸는 태그에 display:grid를 적용합니다. 그리드 나누기 이전에 정적 그리드 시스템을 살펴보며 Column-width 화 Gutter-width 에 대해 알아보았는데 Column-width 대신 grid-template-columns 속성으로 지정합