Ben의 프로그램

HTTP 가 무엇인지 비유적인 설명을 먼저 듣고 넘어가겠습니다. 왼쪽이 client 오른쪽이 server 라고 해봅시다. client 는 Server 에게 HTML 이라는 물건을 달라고 요청합니다. 바로 이것이 요청 request 입니다. 그리고 이것에 대해서 server 가 물건을 주는 것이 응답 response 인 것이죠. HTTP 는 request 와 response 를 나타냅니다. HTTP 라는 것은 HTML, CSS, Javascript, Image 가 서로가 주고받는 콘텐츠라면, 이런 콘텐츠를 서로가 주고 받기 위해서는 서버와 클라이언트가 서로가 알아들을 수 있는 공통의 '메시지'가 필요한데, 바로 그 메시지를 HTTP 라고 하고 HTTP 는 크게 Request 와 Response 를 위한 메..

HTTP에 대한 수업을 시작하겠습니다. 1990 년 팀 버너스리가 웹을 세상에 내놓았을 때 웹은 4가지 요소로 구성되어 있었습니다. 웹 페이지를 만드는 HTML 원하는 웹 페이지에 방문할 수 있도록 도와주는 주소체계인 URL, URI 웹 페이지를 주고받는 소프트웨어인 Web browser, Web Server 통신을 위한 규칙인 HTTP 이렇게 HTML, URL&URI, Web browser&Web Server, HTTP 4가지로 웹은 구성되었습니다. 이것은 웹을 구성하는 가장 중요한 4가지이고, 웹이 아무리 복잡해져도 이것으로부터 한 발짝도 벗어날 수 없습니다. 우리의 관심사는 이 4가지 중 HTTP 즉, HyperText Transfer Protocol 입니다. 세상에 처음 등장한 HTTP 는 매우매..

배열과 포인터의 관계 #include int main(void) { int arr[3] = { 5, 10, 15 }; int* ptr = arr; for (int i = 0; i < 3; i++) { printf("배열 arr[%d] 의 값 : %d\n", i, arr[i]); } for (int i = 0; i < 3; i++) { printf("배열 ptr[%d] 의 값 : %d\n", i, ptr[i]); } return 0; } 위 프로그램을 실행시켜 보면 성공적으로 프로그램이 작동하는 것을 알 수 있습니다. 포인터라는 녀석은 배열 하나하나의 주소를 똑같이 갖고 있다는 것을 알 수 있습니다. #include int main(void) { int arr[3] = { 5, 10, 15 }; int* ..

줄 높이 2 라는 것은 글자 크기의 2배 만큼을 줄높이로 잡겠다는 것을 의미합니다. DOCTYPE html> Document .font1 { font-weight: bold; font-size: 20px; font-style: italic; } .font2 { font: italic bold 30px / 2 sans-serif; } .font3 { font: 30px cursive; } .font4 { text-transform: lowercase; } 글자 꾸미기 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 DOCTYPE html> Document .font1 { color: red; line-height: 3; letter-spacing: 20px; /* 자간 20px, 줄간격 3배 */ }..

inline-block 요소는 가로 세로 길이를 조정할 수 있다. 그런데, 내가 임의로 조정하지 않는다면 inline 처럼 콘텐츠 크기만큼 줄어든다. DOCTYPE html> Document span, p { background: orange; border: 1px solid; margin: 10px; } .p2 { display: inline; } display속성 inline hello world world display inline 을 활용하여 p 태그를 inline 으로 바꾸어 주었다. DOCTYPE html> Document span { background: skyblue; border: 1px solid; margin: 10px; width: 300px; height: 100px; } #spa..

box-sizing 속성은 padding 과 border 를 content 사이즈에 포함시켜서 계산할 것인지 말 것인지 정하는 것이다. content-box 값을 주게 되면 순수하게 content 의 사이즈만 요소의 크기로 잡는 것이다. border-box 값을 주게 되면 border 까지 포함하여 요소의 크기를 잡게 된다. DOCTYPE html> Document div { width: 100px; height: 100px; margin: 10px; padding: 10px; background-color: orange; border: 4px solid red; } .box1 { box-sizing: content-box; } .box2 { box-sizing: border-box; } content-..

DOCTYPE html> Document div { width : 100px; height : 100px; margin : 10px; background-color: orange; } .box2 { border: 10px solid; } .box3 { border: 5px dashed gray; } .box4 { border: 10px double rgb(255, 0, 0); } 여기서 유의깊게 보아야 하는 부분이 있다. border 와 content 영역은 다른 부분임에도 border 종류에 따라서 background color 속성을 똑같이 가져가는 것을 볼 수 있다. DOCTYPE html> Document div { width: 100px; height: 100px; margin: 10px; ba..

Document #div1 { background-color: orange;} #div2 { height: 100px; background-color: skyblue; } span { background-color: gray; width: 300px; height: 300px; } 요소의 크기 변경/확인하기 Hello World Hello World 안녕하세요 DOCTYPE html> Document body { margin: 0; } div { border: solid 1px; } span { background-color: skyblue; } .box1 { margin: 0; } .box2 { margin: 10px; } .box3 { margin: 10px 20px; } .box4 { margin:..

동물의 상속관계에서 스타일을 물려받는 것을 볼 수 있다. 스타일 속성 중에서 글자와 관련된 속성들은 모두 자식에게 물려주게 된다. 같은 요소에 다양한 방법으로 스타일을 적용했는데, 스타일이 적용되는 우선순위가 있다는 것을 확인할 수 있다. 우선 순위 점수 css 우선순위는 사실 점수로 작동하기 때문에 점수를 자세히 알아야 한다. !important : 무한대 !important 를 속성 값 옆에 작성하시면 우선순위가 가장 높게 부여됩니다. div { color: red !important; } 인라인 선언 방식 : 1000점 인라인 선언 방식은 html 내부에서 style 속성을 이용한 방식으로 1000점이 부여됩니다. Contents id 선택자 : 100점 #name { color: red; } cl..

링크 방식 만 거의 사용하고, 나머지 방식은 정말 급할 때만 사용한다. 정말 급할 때라는 말은 예를 들어 시연을 하러 갔는데, 갑자기 css 일부가 동작하지 않는 상황일 때 같은 상황을 말한다. 즉, 일반적인 상황에서는 모두 링크 방식을 활용하게 된다. 그 이유는 자바에서 함수와 변수를 사용하는 것과 같은 이치다. 만약 링크 형식을 사용하지 않았다면 페이지마다 css 를 고쳐주어야 하는 아주 힘겨운 일이 되었을 것이다. 선택자에는 다양한 종류들이 있다. 다양한 선택자들을 잘 알고 활용해야 한다. 선택자는 크게 기본 선택자, 복합 선택자, 가상클래스 선택자, 가상 요소 선택자, 속성 선택자로 나뉜다. 기본 선택자는 우리가 가장 많이 사용하는 선택자들이다. 일치 선택자와 형제 선택자만 조금 더 이해하고 가면..