yh-jeon Full stack

플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기1차원 방식(가로 or 세로 중 한 방향으로 설계하는 방식)으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성플렉스 박스 레이아웃은 크게 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다. 구성 요소주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축교차축(cross axis) : 주축과 수직한 축플렉스 컨테이너(flex container) : display 속성값으로 flex난 inline-flex가 적용된 요소플렉스 아이템(flex item) : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소relative와 absolute의 역할:부모에 relative:부모 요소에 position: relative를 적용하면 자신의 위치를 ..

배경 속성으로 요소의 배경 설정하기background-color 속성요소의 배경에 색상을 넣을 수 있습니다. 속성값으로는 색상값을 사용합니다.background-color:;div{      width:100px;      height:100px;      background-color:red;    } background-image 속성이미지를 넣을 수 있고, 속성값은 삽입할 이미지의 경로를 url() 함수로 지정하면 됩니다.background-image:url('이미지 경로');background-image 속성을 사용할 때 주의사항첫째, 요소의 배경 크기가 반드시 있어야 합니다. background-image 속성은 요소의 배경에 이미지를 삽입하는 원리이기에 요소 배경의 너비와 높이를 지정하지 않으..

css 언어가 가진 특징 1) 기본 스타일 시트 : HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없는데, 웹 브라우저에서 다르게 태그들이 표시가 되는 이유는 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문입니다.2) 적용 우선순위와 개별성 :웹 브라우저에 css 속성이 웹 브라우저의 기본 스타일 시트보다 우선하기에 웹 브라우저에서는 사용자가 정의한 스타일 속성이 적용되는 것입니다. 이는, css가 Cascading Style Sheets 즉, 단계적으로 적용되는 스타일을 뜻하는 언어이기 때문입니다.단계적 적용이란? 같은 태그에 여러 스탕일이 적용되더라도 마지막에 영향을 주는 하나의 스타일만 적용되는 것 {단계적 적용의 개별성 규칙} 선택자예시점수전체 선택자*0태그 선택자div,..

CSS 문법은 선택자와 선언부로 구분합니다.선택자 : CSS 스타일을 적용할 HTML(요소)를 선택하는 영역선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호({}) 내부에 작성합니다!h1 { color: red;}선택자 { 속성: 값;}줄 바꿈과 들여쓰기css 코드를 작성할 때 필수는 아니지만 글의 가독성을 위해 작성하는 것이 좋습니다!주석 - 코드에 설명을 남기는 것 / ctrl + //* 주석 내용 */css 적용하기 - css 문서를 html 문서에 적용시키는 방법1) 내부 스타일 시트 사용하기head>  meta charset="UTF-8">  meta http-equiv="X-UA-Compatible" content="IE=edge">  meta name="viewpor..