youngik

이 글은 CSS 책을 보면서 따로 기록해두어 실제 사용가능할 정보를 기록해보려고 한다. 실제 html과 css를 구성을 할때에 많은 도움이 될 것 같은 부분들 1. width가 설정되어있지 않는 content는 상위태그의 width를 상속받는다. ex) 하이 2. 태그의 margin, padding을 설정하면 width가 늘어남 (width + 2*padding + 2*margin)만큼 3. div 크기를 유지하면서 padding을 설정하고 싶으면 div안에 div태그를 넣고 내용을 넣음 - 2번에 내용으로 하위태그에서 padding, margin을 설정하면 상위태그의 크기가 커지기 때문에 *변경 전 : 내용 (width : (600+(10*2)) => 620) *변경 후 : 내용 위와 같이 사용을 하면..

유사클래스란? - 특정 조건이 발생했을 때 마크업에 추가하는 가상의 클래스 - 가리키거나 or 클릭하는 사용자 행동에 반응해서 적용 : 앵커링크 :link : 기본적으로 {color:blue;, text-decoration:under-line;) 글자 파란색, 밑줄이 그어져있다. :visited : link를 방문하고나서, 변경되는 클래스, (사이트 방문기록, 쿠키를 지우면 다시 원상태로 되돌아온다.) :hover : 마우스를 올려놨을 때, 반응해서 동작하는 클래스 (마우스가 빠져나오면, 다시 원상태로 되돌아온다.) (다른 태그에서도 자주 쓰이는 것이기에 꼭 알아두기!) :active : 활성화가 됐을 때(=마우스를 클릭하고 있을 때) 반응하는 클래스 :focus : 키보드 tab키 or 마우스로 클릭해..

이번 글에서는 Web page를 구성하는 기본 지식에 대해서 작성을 해보고 다시 한번 상고해보자 한다. 웹페이지는 크게 front-end / back-end 부분으로 나누어진다. 웹 프로그래밍에 관심이 있는 사람이라면 크게 2가지 부분으로 나누어진다는 사실을 알고 있을 것이다. 위와 같이 User가 browser에게 웹페이지를 request하면, browser는 front-end을 보여주고 보이지 않는 데이터 부분과 페이지 동작 코드 부분을 back-end에 요청해서 불러와서 보여준다. 1. front-end 먼저 웹페이지 시각적으로 보이는 부분인 front-end의 구조는 크게 1) HTML : 웹페이지의 뼈대 2) CSS : 웹페이지 꾸밈 (폰트, 색상, 이미지 등) 3) Javascript : 웹페..