개발자의 낙원

Ui design icons created by Smashicons - Flaticon Box Theory? 웹개발에서, HTML element(요소)들은 전부 직사각형이 겹겹이 쌓여있는 박스로 취급하여 다루는 기법이다. 박스 찾아보기 구글크롬의 "개발자 도구" 기능을 이용하여 웹을 구성하는 코드를 포함한 여러 요소를 살펴볼 수 있다. box이미지모델은 style코드 최하단부에 위치한다. 또, 크롬의 확장프로그램 pesticide를 통해. 웹페이지 요소들의 박스들을 한눈에 볼 수 있다. pesticide링크 Box의 구성요소 content(콘텐츠, 내용물): 박스가 담고있는 실제 HTML element. 가장 안쪽에 위치한 박스이다. padding(패딩, 충전재): content와 border사이의 공간..

True icons created by Freepik - Flaticon Media? Query? Media: 중간 매개물. 매체 Query: 질문 Media Query(미디어쿼리)? 웹에 접근하는 Media(기계 혹은 뷰포트)의 특성에 따라, 다른 스타일을 적용 할 수 있게 해주는 CSS 기술 CSS의 조건문이라고 생각하면 편하다. responsive(반응형) 웹사이트를 만드는데에 널리 이용된다. 형태 @media media-type and (expression){ } 예시 @media screen and (max-width: 600px){ h1 {font-size: 200px; } div { position: absolute; } } media가 screen이며 너비가 600px 이하인경우, h1의 ..

Grid(그리드)? 평행선과 수평선으로 이루어진 격자구조의 요소. 일반적으로 row(행): 가로줄과 column(열): 세로줄로 구성된다. 구글 크롬 시작화면의 웹페이지 아이콘 링크들도 일종의 그리드 배치로 볼 수 있다. ( HTML 소스는 안 까봐서 저게 실질적인 어떤 라이브러리의 그리드 구조인지는 모른다.) 부트스트랩에서는 responsive(반응성이 있는) 그리드를 제공해 준다. 이 말은 웹페이지 방문자가 사용 중인 기기의 화면크기, 혹은 브라우저의 크기에 반응하여 요소들의 배치가 자동으로 번경됨을 뜻한다. 크롬을 통해 예시를 살펴보자 크롬브라우저의 가로길이를 늘리자, 한 행에 배치되어 있는 아이콘의 개수가 3개에서 5개로 늘었다. 부트스트랩이 반응하는 화면 사이즈 표 출처 : 부트스트랩 그리드 d..

부트스트랩? 웹 디자인용 템플릿 코드를 모아놓은 Html, CSS, js기반의 프론트엔드 프레임워크. 특징 mobile-first(모바일 우선): 스마트폰, 태블릿등의 모바일 사이트를 개발하기 수월하다. responsive(반응성): 화면의 크기에 맞춰서 웹페이지의 요소들이 자동으로 조절된다 홈페이지 Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr bootstrap, navbar, toggler를 이용해서 링크 목록을 제공해주는 버튼을 만들어보자. navbar? 네비게이션바의 준말로 웹사이트 맨위에서 사이트..

구글크롬에선 html 코드를 볼수있는 inspect(검사) 기능이 있다. 1. Element 선택 대상의 HTML element 하나만 복사를 한다. 결과: https://s.pstatic.net/static/www/mobile/edit/20221228/mobile_222744719461.png" width="58" height="60" class="special_img_fold" alt="2023년 계묘년 토끼해"> 2. Outer HTML 선택 대상의 HTML element와 함께, 그 안에 포함된 element들도 복사를 해준다. ex)table이라면 그밑에 tr td 까지, ol이라면 그밑의 li까지 전부 복사를 해준다 결과: https://s.pstatic.net/static/www/mobile..