블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 요소의 너비가 100% 예) , 등 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 예) , 등 박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 개발자 도구 창에서 박스 모델 확인 가능 웹 브라우저에서 웹 문서 열기 박스 모델 확인할 부분을 마우스 오른쪽 버튼으로 누른 뒤 [검사] 선택 개발자 도구 창 위에서 [Computed] 탭 클릭 해당 부분의 박스 모델이 그림으로 표시됨 width, height 속성 실제 콘텐츠 영역의 크기 지정 box-sizing 속성 실제 박스 모델의..

text-shadow 속성 텍스트에 그림자 효과를 추가하는 속성 text-transform 속성 영문 텍스트의 대문자나 소문자를 바꾸는 속성 letter-spacing, word-spacing 속성 글자간 간격, 단어간 간격 .spacing{ letter-spacing: 10px;/*글자간 간격*/ word-spacing: 10px; /*단어간 간격*/ } list-style-type 속성 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성 웹 개발 시작하기 HTML 기본 문서 만들기 다양한 내용 입력하기 입력 양식 작성하기 CSS 기본 표 스타일 (많이 쓰인다.) caption-side 캡션(설명글)은 기본으로 표 위쪽에 표시됨. 이 속성을 이용해 아래쪽에 표시 가능 border 표의 바깥 테두..

font-family 속성 웹 문서에서 사용할 글꼴 지정 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 사용 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정. 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨. 단위를 사용해 글자 크기 지정하기 font-size 속성 font-style 속성 글자를 이탤릭체로 표시하는 속성 font-style: normal | itelic | oblique font-weight 속성 글자 굵기를 조절하는 속성 웹폰트 해보기 1. 웹 개발 시작하기 1-1. 웹 개발 알아보기 1-2. 웹 개발, 어디서부터 시작할까 구글 웹폰트 ..

CSS (Cascading Style Sheets) 웹페이지를 꾸미려고 작성하는 코드 캐스케이딩의 의미 캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻. 즉 계단식으로 적용된다는 의미로 사용. 선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함. 스타일 충돌을 막는(캐스캐이딩)의 원칙 ① 스타일 우선순위 - 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용 ② 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 (지역변수, 전역변수) 인라인 스타일 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시 스타일을 적용하고 싶은 태그에 ..

웹 개발은 웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아니다 웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담아야 한다 서버 vs 클라이언트 클라이언트 - 사용자가 웹 사이트에 접근할 때 사용하는 기기 - (좁은 의미) 웹 브라우저 서버 - 인터넷에 연결된 컴퓨터. - 웹 요소와 여러 정보가 저장됨 웹 개발을 위해 공부해야 할 기술 웹 개발의 기본 웹 문서의 뼈대를 만드는 HTML 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속 HTML에서 약속한 표기법을 사용해서 문서 작성해야 함 웹 문서를 꾸미는 CSS 웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법 다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 함 사용자 동작에 반응하는 자바스크립트 사..