정보통신기술,IT(Information technology)/프론트엔드,Front-end2 CSS 배워보기 (2) - 크롬개발자 모드 사용해보기 CSS 배워보기 두번째 박스 모델과 크롬 개발자 모드 지난 시간에 CSS style을 적용하는 방법을 살펴보았고 이제 그 박스 모델이 어떻게 표현되어있는지 크롬 개발자 모드(네이버 웨일 등도 개발자 모드가 있습니다.)로 살펴보는 방법을 알아보는 시간을 갖도록 하겠습니다. 지난 시간에 만들어둔 테이블은 이런 식으로 생겼었죠. 이제 이것을 크롬개발자 모드로 살펴보겠습니다.(저는 네이버 웨일을 사용하였습니다. 작동하는 방식은 동일합니다.) 열어둔 웹페이지에서 빈공간에 오른쪽 버튼을 눌러 '검사'를 누르거나 키보드 단축키 'F12'를 누릅니다. 그럼 아래와 같은 화면을 볼 수 있는데 개발자 툴의 화면상 위치는 개발자 툴 오른쪽 위쪽의 세로점 3개를 누르면 화면에서 따로 플로팅 하거나, 왼쪽, 아래쪽, 오른쪽에 .. 2022. 12. 15. CSS 배워보기 (1) - style 적용하기 CSS 배워보기 첫번째 - style 적용하기 목차 1. CSS란 무엇인가 2. CSS넣어보기 : body 3. CSS넣어보기 : head 4. 실습해보기 5. 마무으리 1. CSS란 무엇인가 CSS란 웹페이지를 디자인적인 요소를 가미해 꾸며주는 도구라고 생각하시면 쉽습니다. CSS는 Cascading Style Sheets의 약자로 글꼴, 사이즈, 배경색, 위치 등을 지정하는 등의 웹페이지 꾸미기 도구를 말합니다. 하지만 근본적으로 CSS를 사용하게된 이유는 엄청난 수의 웹페이지가 생겨나면서 그 웹페이지들을 개선하고 수정해나가는 과정에서 각각의 페이지의 속성들을 수정하는 것은 엄청난 시간과 노동이 요구되었습니다.(예를 들어 CSS라는 글자의 색을 바꾸라는 지시사항이 떨어졌을 때 만약 그 회사가 운영하는.. 2022. 12. 12. 이전 1 다음