Web Development BootCamp

웹 사이트를 방문하기 위해서 브라우저를 사용하는데 URL을 소유한 회사가 운영하는 서버 컴퓨터에 방문한다는 요청을 보낸다.HTTP : 브라우저와 원격 컴퓨터 간의 통신이 암호화되었다. 원격 컴퓨터에서 웹사이트 코드를 갖게 되고 요청에 대한 답을 우리의 컴퓨터에 보내주고

위의 코드는 HTML 태그와 Hello World! 라는 요소 콘텐츠로 구성되어있는 HTML 요소이다.h1 태그와 구분되는 일반 단락의 태그인 p 태그를 사용하여 문서를 작성했다. 이 코드처럼 자체적으로 스타일을 부여해줄 수 있다.변경하고자 하는 HTML 요소에 따라

코드 포맷 -> prettier을 이용하여 'option + command + L'로 포맷할 수 있다.위의 코드처럼 특정 텍스트에 a 태그를 추가하여 링크를 만들 수 있다. 일괄적으로 스타일을 적용하거나 특정 요소에 특정 스타일을 추가할 경우 코드 상단에 스타일 태그를

기존의 코드에 CSS 요소를 추가하기로 했다.: 종속 스타일 시트\-> 문자 그대로 다수의 CSS 규칙은 하나의 동일한 요소에 영향을 미칠 수 있다.하지만 이런 CSS 코드가 많아지면 효율성 및 가독성이 떨어지기 때문에이런 식으로 daily-challenge.css라는

< 같은 특수 문자를 HTML에서 출력하는 방법 이미지를 추가하는 방법 이미지는 img 태그와 src를 통해 추가할 수 있다. alt 태그는 이미지 불러오기에 실패하면 보여줄 텍스트를 정할 수 있다.

"로컬 개발 웹 서버"다. 왜냐하면 우리 컴퓨터에서 웹사이트를 로컬로 제공하는 웹 서버 소프트웨어이기 때문이다. 이건 우리의 머신이나 웹사이트를 인터넷에 노출시키는 것이 아니다. 여러분은 오직 로컬(즉, 여러분의 기기에서)을 방문하고 접근할 수 있습니다. 이 "웹 서버

각 요소에는 컨텐츠가 있다. 이것은 하나의 공간을 형성한다. padding은 이 컨텐츠와 박스 사이의 간격이다. 패딩의 요소는 각 방향의 간격이다. 2px 5px 2px 5px; 이런식으로 코드를 짜 네 방향 모두의 패딩의 간격을 조정할 수 있다.border은 이것의

지금까지 배워온 HTML & CSS를 실습하기 위해 다음과 같은 과제를 받았다.실습해본 결과 나온 결과물은 이것이다.하면서 헷갈렸던 부분은 list 타입의 스타일을 다음과 같은 얇고 긴 네모를 적용하지 못한 것이다.이미지의 크기 정하기: 이미지의 종횡비는 유지되기 때문

: 웹 사이트 코드를 취하는 걸 의미한다. 이 코드를 '서버'라고 하는 원격 컴퓨터로 옮겨주면 해당 사이트를 담당하는 서버는 특정 주소를 입력하여 웹사이트에 들어오는 방문자에게 코드를 제공한다. 예를 들어 사용자들이 컴퓨터를 이용하여 주소를 입력하면 브라우저는 원격 컴

새로운 웹사이트 제작을 시작하려고 한다기본적으로 헤더, 메인, 푸터로 나눈다. 메인 섹션에는 로고가 들어갈 예정이고 또 내비게이션 바가 들어갈 예정이다. 메인에는 섹션 2개가 들어가서 각자 파트를 나눌 생각이고 마지막으로 푸터를 추가해 웹 사이트를 나눴다.CSS Fle

css flexbox를 이용하여 기존의 로고처럼 만들어보라는 과제를 받았다.여기서 Travel Goals -------------------D ---- About이런 식으로 배치해야하는데 이를 위해서는 기존의 코드인ul에 display : flex;를 추가해주었다. 이

content-box:기본 값으로, 요소의 크기는 오로지 해당 요소의 콘텐츠(content) 영역의 크기만을 고려하여 계산된다. 즉, width와 height 속성은 콘텐츠 영역의 크기를 의미하며, 여기에 패딩(padding)과 테두리(border)를 추가하면 요소의

배경에 그라데이션을 추가해봤다.또한 푸터에 인스타그램과 페이스북 로고를 추가하여 푸터를 완성시켰다.당연하게도 푸터는 display : flex 를 통해 이미지를 양 옆으로 배치시키고 그것의 사이즈를 조절해주었다. destination 페이지에는 헤더가 고정되도록 하기

오버플로우 CSS의 오버플로우(overflow) 속성은 요소의 내용이 요소 자체의 크기를 초과할 때 처리 방법을 지정하는 속성이다. 즉, 요소에 내용이 너무 많거나 너무 크면 어떻게 처리할지를 설정하는데 사용된다. overflow 속성은 다음과 같은 값들을 가진다:

반응형 웹 디자인(Responsive Web Design, RWD)은 다양한 디바이스와 화면 크기에 자동으로 최적화되는 웹 사이트를 구축하는 디자인 접근 방식이다. 즉, 사용자가 데스크톱, 태블릿, 스마트폰 등 다양한 기기에서 웹 사이트를 열어도 내용과 레이아웃이 최적

위와 같은 디자인을 가진 웹 사이트를 만들어보라는 과제를 받았다. 이 사이트를 통해 반응형 웹 디자인에 대해 공부해 볼 예정이다. &lt;-- 추후 추가 예정 -->

CSS에서 사용되는 em, rem, 그리고 %는 각각 다른 측정 단위이다.em:em 단위는 요소의 글꼴 크기를 해당 부모 요소의 글꼴 크기에 상대적으로 지정한다.예를 들어, 요소의 글꼴 크기가 1.5em로 설정되면 해당 요소의 글꼴 크기는 부모 요소의 글꼴 크기의 1.

데스크탑 화면에서 시작하여 768픽셀이나 그 이하로 너비가 좁아지면 그리드 레이아웃이 바뀌는 미디어 쿼리를 추가해보려고 한다. css의 cascading 속성때문에 이 코드를 가장 밑에 적용 시켜주면 800px에서는 다음과 같은 그리드 속성을 보여준다.하지만 max-w

오늘은 새로운 모듈을 시작했다. 좀 더 예쁜 웹 사이트를 만들기 위한 수업의 내용을 가진 모듈이며 실습을 통해 배워가려고 한다.이러한 작은 창을 가진 페이지를 제작해보고자 한다.웹 사이트에 기능을 차근차근 추가해야 한다.전달되어야 하는 핵심 정보를 생각한다.웹사이트를