목록CSS (6)

배꼽파지 않도록 잘 개발해요

[코드잇] CSS 레이아웃

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 position 일반적인 글의 흐름에서 벗어나고 싶을 때 사용 속성값 : static, relative, absolute, fixed, sticky 위치의 기준 : position 으로 정하기 구체적인 위치 : top, right, bottom, left 으로 지정함. ex. 이미지나 영상 위에 글자가 겹치기 화면 위쪽에 메뉴가 스크롤을 해도 떠있는 것처럼 글 흐름이랑 상관없이 static position 속성의 기본 값 원래 있어야 할 위치에 배치 일반적인 글의 흐름을 따름 relative 원래 위치를 기준으로 움직이고, 원래 있던 공간은 그냥 비워놓고 배치함. margin : 다른 요소들도 이동함. relative : 다른..
코드잇 Codeit/Front-End 2024. 1. 31. 20:38
[엘리스sw] 1주차 3일 - CSS 애니메이션, 반응형 웹

◆ 움직이는 웹사이트 제작 ◆ 반응형 웹사이트 제작 ◆ 움직이는 웹사이트 제작 CSS3에 등장한 속성 = Transform, Transition, Animation Transform 특정 영역을 회전시키거나, 확대/축소시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용 transform 속성은 순서대로 적용되는 것이 아니라, 가장 마지막에 적용된 속성만 적용되는 특성임. → 만약 모든 transform 속성을 적용하려면 여러 개의 transform 속성을 한 줄에 모두 적기 • rotate(45deg); 평면회전, 입력한 각도만큼 회전, 음수도 입력 가능 (-45deg) • scale(2, 3); 비율만큼 확대, 숫자는 비율을 의미, width를 2배, height를 3배 확대..
교육/엘리스 SW 트랙 2023. 12. 27. 23:06
[엘리스sw] 1주차 1일 - HTML/CSS 기초 문법

◆ 웹사이트의 정보와 디자인 ◆ 웹사이트 레이아웃에 영향을 미치는 요소 ◆ 웹사이트의 정보와 디자인 웹을 구성하는 요소 · HTML : 정보 or 설계도 · CSS : 디자인 or 스타일링 · JavaScript : 기능과 효과 웹사이트 제작시 고려 사항 · 웹 표준 : 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격, 강제성은 없으나 검색엔진 최적화에 도움됨. · 웹 접근성 : 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식 · 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 HTML 기본 태그 HTML · Hyper Text Markup Language · 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 · 버전..
교육/엘리스 SW 트랙 2023. 12. 25. 20:26
[코드잇] CSS 핵심개념 ② - Display, 선택자, 스타일 계산하기

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 블록과 인라인 display: block display: inline display: inline-block display: none /*css로 html태그를 감출 때*/ 블록 (block) 인라인 (inline) 위에서부터 아래로 차례대로 배치됨 평소에 글쓰는 방향 화면에 꽉 차면 다음 줄로 넘어감 너비와 높이를 지정할 수 있다 너비나 높이를 지정할 수 없음 (예외적으로 같은 건 가능) 크기를 지정할 수 있음 크기를 지정할 수 없음 margin 과 padding 어떤 방향이든 모두 가능 여백은 가로로(글 쓰는 방향)만 가능 인라인 블록 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성 · C..
코드잇 Codeit/Front-End 2023. 12. 18. 18:56
[코드잇] CSS 핵심개념 ① - 기본개념, 자주 쓰는 CSS 속성, 박스모델

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 관심사의 분리 (Separation of concerns) HTML코드와 CSS를 분리하여 작성함. HTML 우도 한라산 국립공원 성산 일출봉 CSS h3 { color: #f56513; // color는 속성, #f56513는 속성값 } CSS 규칙 · 선택자(h3), 선언(color: #f56513;) · 위 예시에서는 h3과 중괄호로 감싼 코드 아이디 · 아이디 이름은 중복해서 쓸 수 없음. · id 선택자로는 요소 하나만 선택 가능함. HTML 한라산 국립공원 CSS #hallasan { color: #f56513; } 클래스 · 여러 개를 한번에 스타일링을 하고 싶을 때 사용 · 아이디와 클래스 선택자 중 어떤 걸 써..
코드잇 Codeit/Front-End 2023. 12. 17. 18:50
입문자를 위한 CSS 기초 강의 (유노코딩)

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 • CSS : Cascading Style Sheets Cascading : 계단식 Style : 멋을 내다 Sheets : (종이) 한 장 → 계단식으로 스타일을 정의하는 문서! CSS는 HTML 문서에 스타일을 더해줌. HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있음. • CSS가 일하려면 - CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없음. - HTML : 웹 문서의 콘텐츠를 구성하는 언어 - CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어 (색상, 크기, 위치 등) H..
강의노트 2023. 3. 29. 20:49
이전 Prev 1 Next 다음