728x90 [FrontEnd]/CSS6 Flexbox Flexbox 행과 열을 이용하여 항목을 배치하는 레이아웃 메소드이다. display : flexbox; Flexbox는 부모 박스 요소를 통해서 자식 박스의 크기 등을 결정한다. 위 코드를 부모 박스에 선언함으로써 실행이 가능하다. box1 box2 box3 HTML 코드 이라는 부모 박스 안에 세 개의 자식 박스가 있다. main{ display : flex; border : 1px dotted red; } div { border : 1px solid green; } * { margin : 10px; padding : 10px; } 위의 HTML 코드에 연결된 CSS 코드에 display : flex를 추가한다. Flexbox의 속성 Flexbox에는 부모 요소에 적용해야하는 속성과 자식요소에 적용.. 2022. 8. 24. 페이지 레이아웃 ※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음. CSS는 사용자 중심의 인터페이스를 좀 더 구체적이고 세련되게 제작할 수 있게 도와주는 역할을 한다. CSS에서 다룰 수 있는 페이지 레이아웃 기능은 그 중에도 가장 기본적이며 필수적인이라고 할 수 있다. 레이아웃 리셋 HTML로 제작한 문서에는 기본적으로 내장되어있는 스타일이 있다. HTML의 내장 스타일은 문서를 만들 때 일일이 스타일을 지정해줄 필요가 없다는 점에서 편리하지만, 때로는 문제를 일으키기도 한다. 박스의 시작을 (0,0)에서 시작하고 싶은데 태그가 가진 내장 스타일에는 여백이 있음 width, height 계산은 내장 .. 2022. 8. 24. CSS 박스 모델 ※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음. Margin 테두리(border) 바깥의 외부 여백 영영으로, 기본적으로 투명하며 배경색을 지정할 수 없다. p { margin : 1px 2px 3px 4px; } 왼쪽부터 위, 오른쪽 아래, 왼쪽으로 시계방향으로 기억하면 쉬움 p { margin : 1px 2px; } 값이 두 개만 있을 때는 왼쪽이 상하, 오른쪽이 좌우임 p { margin : 1px; } 값이 하나만 있을 때는 모든 영역이 동일하게 적용 p { margin-top : 1px; margin-right : 1px; margin-bottom : 1px; margin-lef.. 2022. 8. 23. CSS의 셀렉터 정리 ※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음. 기본 셀렉터 Id와 Class 비교 ...내용... #name { color : red; } ...내용1... ...내용2... ...내용3... .name { color : red; } id class #name .class 한 문서에 하나의 요소에만 적용 가능 한 문서에 여러 요소에 적용 가능 특정 요소(하나의 요소)만을 위해 사용 스타일 분류에 사용함 전체 셀렉터 *{} Tag 셀렉터 h1, nav {} 자식 셀렉터 내가 니 할애비다. 내가 니 애비다. 응애 .GrandFather > h3{ background-color : skybl.. 2022. 8. 23. CSS의 코드를 보며 기본 구조를 알아보자. 어서오세요! 스즈몰입니다 :) 오늘의 특가 상품 Apple Watch Mac iPhone iPad 특가 구매 놓치지마세요!! ... 광고배너란 ... 개인정보 처리방침 이용 약관 법적 고지 웹사이트 스즈몰의 HTML 코드 link link 문법을 통해 index.css라는 css파일과 연결할 수 있다. link에서 rel은 현재문서와 외부 리소스 간의 연간관계를 명시하며, stylesheet는 속성값으로 stylesheet로 사용할 외부 리소스 값을 불러온다는 뜻이다. body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 1em.. 2022. 8. 23. CSS란? ※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음. 프론트엔드 영역의 대표적인 언어인 HTML, CSS, JavaScript는 각각의 역할이 있다. HTML은 웹의 뼈대와 구조를 만들고, CSS는 그 구조를 가지고 스타일링을 통해 사용자 중심의 인터페이스를 만든다. 마지막으로 JavaScript는 정적인 페이지를 동적인 페이지로 만들어 페이지 간 혹은 콘텐츠 간의 상호연결을 가능하게 한다. 이러한 점에서 프론트엔드 영역의 궁극적인 목적은 UI/UX를 고려하여 사용자에게 편리한 사용 경험을 제공하는 웹을 개발을 하는 것이라고 할 수 있다. 그 중에 스타일링 언어인 CSS는 UI/UX를 고려하여.. 2022. 8. 23. 이전 1 다음 728x90
