css 4

Chapter 08. 레이아웃을 구성하는 CSS 박스 모델

1. CSS와 박스 모델 - 박스모델을 블록레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. Def) 블록 레벨(block-level) 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. - "한 줄을 차지한다"는 것은 해당 효소의 너비가 100%라는 뜻이다. - 블록 라벨 요소의 왼쪽/ 오른쪽에 다른 요소가 올 수 없다. - , , 가 대표적이다. Def) 인라인 레벨(inline-level)요소는 한 줄을 차지하지 않는다. - 콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. - , , 를 이용한다. Def) 박스 모델(box-model)요소: 박스 형태인 요소를 박스 모델 요소라고 한다. 1) 박스 모델의 기본 구성 - 콘텐츠 영역..

FrontEnd 2022.04.23

Chapter 07. 텍스트를 표현하는 다양한 스타일

1. 글꼴 관련 스타일 1) 글꼴을 지정하는 font-family 속성 - 웹 문서에서 사용할 끌꼴은 font-family 속성으로 지정한다. - 기본형: font-family : | [, ] - 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않으면 의도한 글꼴이 아닌 글꼴로 표시된다. - 따라서, 없을 경우를 대비한 두 번째, 두 번째 글꼴까지 생각해야한다. 2) 글자크기를 지정하는 font-size 속성 - 글자 크기 단위는 px(픽셀), pt(포인트) 등으로 지정가능, 백분율도 가능하다. - 키워드를 사용하여 글자 크기 지정하기 - 단위를 사용하여 글자 크기 지정하기 -> 예전에는 절대 크기 단위 px(픽셀), pt(포인트)를 사용, 최근에는 상대크기 단위인 em, rem 주로 사용 - ..

FrontEnd 2022.04.20

Chapter 06. CSS의 기본

1. 웹 문서에 디자인 삽입하기 Def) 스타일(style): HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법 등 결정짓는 것. - HTML로는 문서의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다. - HTML태그만을 이용하는 것보다 CSS 스타일을 적용해서 꾸미면 보기 좋게 만들 수 있다. - 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. Def) 반응형 웹 디자인: 사용자가 PC로 접속하든 모바일로 접속하든 웹 브라우저의 크기에 따라 - 화면의 레이아웃을 바꿔주는 것을 말한다. - 2개의 웹 문서를 따로 만들지 않고 하나의 웹 문서에서 작동하도록 만드는 것이다. 2. 스타일과 스타일 시트 - 기본형: 선택자 {속성1: 속성값1; 속성2 : 속성값2..

FrontEnd 2022.04.20

Chapter 01. 웹 개발 시작하기

1. 웹 개발 알아보기 Def) 웹 개발: 웹 사이트를 만드는 것 - 정적 사이트(static site): 정보를 보여주기만 하는 웹 사이트 - 동적 사이트(dynamic site): 사용자에서 제공할 기능과 서비스를 담은 사이트 Def) 서버(server): 인터넷에 연결된 컴퓨터, 정보 검색 또는 처리를 한다. Def) 클라이언트(client): 사용자가 웹 사이트레 접근하기 위해 사용하는 PC, 태블릿 PC, 스마트폰 등 - 사용자와 서버 사이에서 화면으로 보여주는 역할을 한다. Def) 프론트엔드(front end): 사용자 앞에 보이는 영역, 웹 브라우저 화면에 보이는 것을 다룬다. - HTMP, CSS, 자바스크립트를 사용한다. Def) 백엔드(back end): 사용자 뒤에서 보이지 않는 영..

FrontEnd 2022.04.17