IT 개발노트

1. 레이아웃 1.1 flex : CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구이다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있다. 1.2 flex의 기본 : flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야한다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있다. 기본은 row이다. 12345678910111213141516171819202122232425262728 .container { background-color: powderblue; height: 200px; display: flex; flex-direction: row-reve..

1 레이아웃 1.1 html 엘리먼트들은 크게 두 가지로 구분된다. - 화면 전체를 사용하는 태그 -> block element - 화면의 일부를 차지하는 태그 -> inline level element - block은 화면 전체를 차지하기 때문에 다음 문장이 자동으로 줄바꿈 된다. - inline은 설정한 영역만큼만 차지하기 때문에 다음 문장이 줄바꿈 되지 않는다.123456789101112131415 h1, a{ border:1px solid red; } h1 { display: inline; } a { display: block; } Hello world 안녕하세요. 생활코딩입니다. 결과 - display 속성을 이용해서 block과 inline을 바꿔줄수 있다.1.2 박스모델 - 테두리는 박스모델..

1 CSS3 스타일 속성 기본 1.1 CSS3 단위 : CSS는 각각의 스타일 속성에 다양한 값을 입력한다. 1.1.1 키워드 단위 : 키워드는 CSS를 개발할 때에 이미 지정된 단어들을 의미한다. 통합 개발 환경을 사용할 때에 다음과 같이 확인할 수 있다. 1.1.2 크기 단위 : CSS3에서 사용하는 크기 단위는 %, em, cm, mm, inch, px이다. 단위 설명 % 백분율 단위 em 배수 단위 px 픽셀 - 크기 단위 사용법 123456 p:nth-child(1) { } p:nth-child(2) { font-size: 100%; } p:nth-child(3) { font-size: 150%; } p:nth-child(4) { font-size: 200%; } 1.1.3 색상 단위 : 색상을..

1. CSS3 선택자 기본 1.1 선택자 개요 - 선택자는 특정한 HTML 태그를 선택할 때에 사용하는 기능 - 선택자를 사용해 태그를 선택하면 원하는 스타일과 기능을 적용할 수 있다. - 스타일을 적용할 때에 선택자는 다음 위치에 사용한다. 1.2 전체 선택자 : HTML 문서 안의 모든 태그를 선택할 때는 전체 선택자를 사용한다. - 전체 선택자선택자 형태 설명 * HTML 페이지 내부의 모든 태그를 선택한다. - 다음 코드는 문서 안의 모든 태그의 color 속성을 red로 지정한다. 예시 123456789101112131415 CSS3 Selector Basic Page /* 모든 태그의 color 속성을 red 키워드로 적용한다. */ *{ color : red; } Lorem ipsum Lor..