막내의 막무가내 프로그래밍 & 일상

엘리먼트가 배치되는 방식 - (display:block / inline) 기본적으로 엘리먼트들은 block인지 inline인지 정해져있습니다. 예를들어 , 는 block방식이고 , , 은 inline 방식입니다. block은 말 그대로 벽돌을 쌓듯 아래로 띄워지면서 써지고 inline은 책처럼 쭉쭉 옆으로 글이 써져나가고 최대길이에 도달하면 한줄이 띄워져서 이어써져갑니다. 그러나 이렇게 기존에 정해져있는 방식을 css에 display속성을 설정하여 inline방식을 block방식으로도 변경해줄 수 있습니다. 엘리먼트가 배치되는 방식 (position:static, relative, absolute) 엘리먼트 배치가 순서대로만 위아래로 또는 좌우로 흐르면서 쌓이기만 하면, 다양한 배치를 하기 어렵습니다. ..

#jisu > p:nth-child(2) 는 jisu라는 id를 가진 태그의 두번째 자식이 p태그이면 해당 태그에 css를 적용해달라는 뜻이다.( 만약 첫번쨰자식이 p태그 두번쨰자식이 span 세번째 자식이 p태그이면 적용이 안된다. (두번째 자식이 아니므로) #jisu > p:nth-of-type(2)는 jisu라는 id를 가진 태그 자식들 중에 두번째로 나오는 p태그에 CSS적용을 하는 것이다. nth-child와 차이점으로 자식이 p, span , p여도 세번째 나오는 p가 두번째로 나오는 p태그이므로 css 적용이 된다. 참고로 >자식관계일때만 이게 동작하고 띄어씌기 자손관계일떄는 동작을 안한다고도 한다. 첫번째 단락에 red 색상이 적용됩니다. 단락 선택 첫번째 단락입니다 두번째 단락입니다 세번..

CSS는 똑똑하게 동작하며 우선순위가 있다. 1. 첫번쨰 우선순위 먼저 크게 우선순위를 나누면 inline방식 < internal, external 이다. internal과 external은 뭐가 뒤에 오냐에 따라 우선순위가 그떄그떄 달라진다. (CSS는 기본적으로 만약 똑같은 내용이 있을 경우 뒤에 온 CSS스타일을 적용한다. 예를들어 이렇게 head태그사이에 internal방식과 그 뒤에 external방식이 있다고 치자. 물론 css.css에도 똑같이 internal 스타일처럼 div { color:blue; } 이렇게 되있는데 색만 blue라고 해보자. 그럼 external 방식이 internal방식보다 뒤에 선언되있으므로 external css가 적용되서 div태그사이의 색은 blue가 된다. ..

클라이언트가 서버에 데이터를 요청을 하고 서버로부터 받은 데이터 즉 웹을 통해서 전달된 데이터를 브라우저를 통해 화면에 띄워주게 된다. 여기서 브라우저는 크롬, 익스플로어, 사파리, 파이어폭스 등 여러가지가 있다. 그럼 화면에 띄워주기위한 브라우저의 동작방식이 있을 것이다. 브라우저는 데이터를 해석해주는 파서와 해석한 데이터를 화면에 표현해주는 렌더링 엔진이 있는데 파서로 전달받은 데이터를 세부적으로 나눠서 해석하게되고 랜더링작업을 마친 후 화면을 띄워주게 된다. 다음 밑 그림을 참고하도록하자. 사파리 브라우저에서 처리되는 webkit렌더링엔진의 처리과정출처 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 이런식으로 HTML, CSS..

HTTP는 팀 버너스리와 그의 팀이 발명하였으모 Hypertext Transfer Protocol의 약자이다. HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜이다. HTTP는 서버/클라이언트 모델이며, 장점과 단점은 다음과 같다. 장점 - 불특정 다수를 대상으로 하는 서비스에는 적합하다. - 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다. 단점 - 연결을 끊어버리기 때문에, 클라이언트의 이전 상황을 알 수가 없다. - 이러한 특징을 무상태(Stateless)라고 말한다. - 이러한 특징 때문에 정보를 유지하기 위해서 Cookie와 같은 기술이 등장하게 되었다. 또 HTTP를 공부하면 URL..