Frontend/CSS (14) 썸네일형 리스트형 font awesome CDN 방식 fa 클래스는 Font Awesome을 사용하기 위한 가장 기본적인 클래스입니다. fa 클래스는 Font Awesome 폰트 종류, 여백, 정렬 등의 스타일들을 포함하고 있습니다. 이 스타일들은 모든 Font Awesome 클래스에 적용되어야 하는 속성이기 때문에, 편의를 위하여 fa 클래스가 따로 만들어져 있는 것입니다.. 그러니 Font Awesome을 사용할 때에는 fa-car 클래스 뿐만 아니라 fa 클래스도 함께 적용되어야 합니다. 위와 같이 HTML을 작성하면 그 결과는 다음과 같습니다. 이렇게 자동차 아이콘이 화면에 표시됩니다. 정말 놀랍지 않습니까? 이렇게 만들어진 아이콘은 색깔도 바꿀 수 있습니다. Font Awesome 아이콘은 텍스트 형식으로 만들어진 아이콘이기 때문에 그냥 그 아이콘.. flexbox flexbox 가변적인 박스를 간단하게 만드는 기술 웹사이트 구조 설계를 위한 기술 박스 쉽게 배치할 수 있다는 장점 플렉서블 박스의 특정 속성값을 설정하여 여러 박스의 높이/길이/위치 등이 유연하게 작동하는 박스를 간단히 만들 수 있음 요소의 배치를 1차원적으로 효과적으로 할 수 있게 도와주는 css의 기능 flexbox 구성요소 flex container = 부모 박스 가변적인 박스로 작동하기 위한 기본 개념 flexbox를 사용하기 위한 필수 개념 wrap처럼 모든 flex item을 감싸고 있는 존재 특정 속성값을 적용하여 가변적인 박스로 작동하게 함 여러 속성을 통해 내부 아이템의 정렬 및 속성 부여 가능 반드시 display 속성에 flex 또는 inline-flex 키워드를 주어야 flexb.. 위치 속성 절대 위치 좌표 / 상대 위치 좌표 절대 위치 좌표 화면 크기가 고정된 프로그램 개발에 많이 사용 (닌텐도) 실행 환경의 화면 크기가 고정되지 않은 프로그램 개발에 사용 시, 일정 크기의 영역을 지정한 태그 내부에서 사용 상대 위치 좌표 실행 환경의 화면 크기가 고정되지 않은 프로그램 개발에 사용 (스마트폰, HTML 페이지 등) position 속성 요소의 위치 지정 형식 설정에 사용 절대 위치 좌표 사용 -> absolute 또는 fixed 키워드 입력 상대 위치 좌표 사용 -> static 또는 relative 키워드 입력 absolute 상위 요소 = static (상위 요소의 position 설정되지 않은 경우) -> 브라우저 기준 배치 상위 요소 != static -> 가장 가까운 상위 요소 .. 가시 속성 & inline과 inline-block 차이 inline 기본적으로 줄바꿈 강제하지 않음 해당 태그가 마크업 하고 있는 컨텐츠의 크기만큼만 공간을 차지 width, height 지정해도 무시당함 margin, padding 속성 지정 시 좌우 간격만 반영됨 (상하 간격은 반영되지 않음) block 전후 줄바꿈이 발생 -> 다른 요소들을 다음 줄로 밀어내고 혼자 한 줄을 차지 width, height, margin, padding 설정하는 대로 모두 반영됨 inline-block 기본적으로 inline 요소처럼 전후 줄바꿈 없이 다른 요소들과 나란히 배치 width, height, margin, padding 설정하는 대로 모두 반영됨 명시적으로 display:inline-block 지정해줘야 함 여러 요소를 한 줄에 원하는 너비만큼 배치 가능 ->.. 박스 속성 ( margin / border / padding / width / height ) 박스 속성 margin border padding width height margin 테두리와 다른 태그 사이의 테두리 바깥쪽 여백 해당 요소 기준 바깥쪽 여백 border 테두리 border-width border-style border-color border-radius("왼쪽 위" "오른쪽 위" "오른쪽 아래" "왼쪽 아래") border-left/right/top/bottom padding 테두리와 글자 사이의 테두리 안쪽 여백 배경색은 padding 영역까지만 적용 ex) width 100px, height 10px인 div에 padding 20px 주면, div 내부 글씨 표현되는 영역 != 80px * 80px -> 여전히 100px * 100px 이유 : padding은 테두리와 글자 사이.. CSS3 단위 CSS3 단위 스타일 값으로 입력할 수 있는 단위 키워드 단위 크기 단위 색상 단위 URL 단위 키워드 단위 키워드 : W3C에서 미리 정의한 단어 키워드를 스타일 값으로 입력하면 키워드에 해당하는 스타일이 자동으로 적용됨 스타일 속성별로 값으로 사용할 수 있는 키워드가 따로 정해져 있음 크기 단위 CSS3에서 가장 많이 사용하는 단위 % (백분율 단위) 초기 설정 단위 100% 크기를 상대적으로 지정 em (배수 단위) 부모 요소에저 지정한 글자 크기 기준으로 배율 조정 크기를 상대적으로 지정 1em = 100% 1.5em = 150% (1.5배) px 크기를 절대적으로 지정 cm, mm, in, pt 등 색상 단위 색상에 해당하는 영단어 입력 -> 영단어로 표현할 수 있는 색상 제한적 -> 색상 단위.. float의 개념 및 float를 해제하는 다양한 방법 float 태그를 오른쪽이나 왼쪽에 붙일 수 있음 웹 페이지 레이아웃 잡을 때 많이 사용 웹 브라우저 크기에 상관없이 공지 등을 일정한 위치에 고정할 때 적합 태그를 수평으로 정렬 가능 이미지와 글을 어우러진 형태로 출력 가능 일반적인 정렬과는 다르게 float 정렬된 태그 주변으로 다른 태그가 흐르듯이 배치됨 기본적으로 block 요소에서만 사용 가능 (, , , 등) inline 요소에 float 속성을 주는 경우, 해당 요소의 특성은 inline-block 박스처럼 렌더링 됨 플로팅된 요소는 display : inline-block;을 선언한 것과 동일해지기 때문에 따로 선언해줄 필요 없음 태그에 float 속성을 주면 해당 태그의 가로 값은 최소 크기가 되어 빈 공간이 생김 -> 그 빈 공간에 다.. 대체 요소 (replaced element) 대체 요소(replaced element) 자신의 표현 결과가 CSS의 범위를 벗어나는 요소 CSS 서식 모델과는 분리된 외부 객체인 요소 자신의 콘텐츠가 현재 문서 스타일의 영향을 받지 않는 요소 CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못합니다. 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속하지는 않습니다. : 인라인 프레임 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다. developer.mozilla.org CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소.. 동적 (반응) 선택자 동적(반응) 선택자 선택자:active - 마우스를 클릭한 태그 선택 선택자:hover - 마우스를 올린 태그 .content div:hover{ /* 마우스 올렸을 때 */ background:yellow } .content div:active{ /* 클릭 했을 때 */ background:red } 이전 1 2 다음
