FrontEnd/HTML&CSS
03_HTML 블록과 인라인, 메타데이터
이번엔 블록과 인라인에 대해 공부했다. 1. 블록요소 1/ div,h1,p 2/ 사용가능한 최대 가로 너비를 사용 3/ 크기를 지정할 수 있음. 4/ width 100, height 0 으로시작 5/ 수직으로 쌓인다 6/ margin padding 상하좌우 사용가능 2. 인라인 1/ span,img 2/필요한 만큼 너비 3/크기지정 x 4/width 0 , height 0 으로 시작 5/ 수평으로 쌓임 6/ margin padding 위,아래는 사용불가 이다. 단순히 태그들의 종류(?)라고 이해했다. 대표적으로 div는 블록, sapn이 인라인이라 하나씩 비교해보자. 안녕하세요!안녕하세요! 안녕하세요! 안녕하세요! body{ margin : 0; padding : 0; } div{ background :..
02_css 첫걸음
html이 구조를 만드는거였다면 css는 꾸미는 것과 같다. div{ color: red; } 위 코드를 css로 둔다면, div의 color가 설정되는 방식이다. 반갑습니다~ 위와같은 html을 연동해서 실행한다고 치면 위와같이 색이 입혀지게 된다. css에 대해서는 나중에 자세하게 공부하겠지만, 오늘 내가 공부한걸로는 Personal Open Source Business Explore 저번에 html공부할때 썼던 github 목차를 실제 github처럼 꾸며보는걸 공부했다 body{ margin : 0; padding : 0; } .header{ width : auto; height : auto; background : white; border-bottom: 1px solid lightgray; } ..
01_html 기초
html 첫 기초를 배웠다. 아마 티스토리에 올리는 글들은 내가 공부하는 모든내용이 올라가기보단 코드내역 위주로 적어서 나중에 복습할때 편하게 할 것 같다. 안녕하세요! 가장 기본적인 기능으로 head, body로 크게 두 분류로 나뉘어져 있다는 것을 알았다. 어느정도 기초 문법을 다룬 후에 만든 예제는 깃허브의 특정 이미지 를 만들기위한 html 기초예제를 구현해보았다. Personal Open Source Business Explore 이렇게 head부분에서 타이틀 정도만 바꾸고, body에서 크게 container를 만들고 그안에 좌측,우측 으로 나누어서 저장했다. 이를 실행하면 이처럼 나온다. 꾸민대로 나오지는 않는게 당연하다. 꾸미는건 CSS의 영역이기때문에 튼튼하게 기초만 잡았다고 생각하면 될..