빈코더

1. HTML 레이아웃 inline, block 성질을 배웠으니 margin의 값을 하나 더 확인해 보려고 합니다. div { background-color: yellow; margin-bottom: 20px; } .test1 { width: 150px; } 설명과 같이 block 요소일 때 width 값을 주면 더이상 늘어나지 않게됩니다. 이 때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있습니다. .center { margin: 20px auto; } 1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고, 4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였습니다. 이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는..

1.HTML Block vs Inline 1. Block과 Inline 대부분의 HTML element(이하 요소)는 block 요소입니다. 예를 들어, , , , , , , 등이 모두 block 요소에 해당하는 태그들입니다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다. block 요소와 성질이 반대인 inline 요소도 있습니다. , , 태그 등이 inline 요소입니다. inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다. 하지만! 아무리 block 요소의 성질을 가진 태그도 css을 사용하여 inline 스타일로 바꾸면 과 똑같은 디자인이 됩니다. inline 성질을 갖도록 하는 CSS ..

1. HTML 이미지 넣기 html에 이미지 넣기를 해보겠습니다. 이미지를 넣는 방법은 2가지가 있는데요 img 태그를 사용 background-image로 이미지 넣기 1. img로 태그를 사용하여 이미지 넣기 방법은 간단합니다. 위와 같이 하시면 됩니다. 그럼 속성을 하나하나 살펴볼까요 ? alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트 src: 이미지 파일 경로 or 이미지 url 주소 보면 사진이 너무 큰것 같습니다. 사이즈를 줄여보도록 하겠습니다. img { width: 150px; } 위와 같이 css설정으로 크기를 줄일수도 있습니다. img 태그의 속성중 width와 heigth가 있지만 css에서 작성하시는게 나중에 ..

1. Margin과 Padding 모든 요소는 아래와 같이 margin, border, padding의 스타일을 갖고 있습니다. 위의 그림을 해석해보자면, 주황색은 margin 영역, 위, 오른쪽, 아래, 왼쪽에 모두 5px 노란색은 border 영역, 보더의 두께는 5px이다. 초록색은 padding 영역, 위, 오른쪽, 아래, 왼쪽에 모두 20px 요소의 가로는 820px, 세로는48px border는 다음 시간에 배우겠지만, 요소에 border 스타일을 주면 테두리가 그려집니다. padding은 border 내에 생기는 영역입니다. 그리고 위의 그림에서 820px이라는 가로 값은 padding영역이 합쳐진 가로 길이입니다. margin은 border 외부에 생기는 여백입니다. 두 번째 사진처럼 ma..

1. HTML Attribute(속성) HTML Attribute에 대해서 다시 한 번 보겠습니다. 네이버로 이동 a는 tag 이름이고 href는 attribute(속성) 이름이며 https://naver.com는 href 속성에 대한 attribute 값이고, "네이버로 이동"은 contant(내용)입니다. 꼭 a tag가 아니더라도 attribute를 사용 할 수 있습니다. 사용 하는 tag에 따라 사용하는 attribute도 달라집니다. 처음에는 tag도 공부해야 하고 attribute도 공부해야 하기 때문에 머리가 좀 아프지만... 공부를 하면서 tag와 attribute는 익혀나가시면 됩니다. 1 - 2. ID id는 각 태그에 이름을 주는 속성입니다. 이름은 이름인데, 주민등록 번호와 같이 한..

1. HTML 파일의 구조 HTML 파일의 구조에 항상 아래와 같습니다. 위 코드를 한번 살펴보도록 합시다. 1 - 1. HTML 파일의 제일 첫 째줄에 위치하는 선언문 입니다. 는 HTML 태그는 아닙니다. 해당 html 파일이 어떤 버전의 html을 사용했는지 브라우저에 알려주는 역할을 합니다. 선언을 해주면 html5 버전을 사용한다는 의미입니다. html5는 가장 최신 버전 입니다. 1 - 2. 를 제외한 모든 요소들을 감싸는 tag입니다. 브라우저가 을 만남으로써 html의 시작을 감지하고 요소를 그릴 준비를 합니다. 1 - 3. 위와 같이 문자 셋을 지정해 주거나() 모바일 기기를 고려한 정보를 주기도 합니다() 그리고 웹 페이지의 이름에 대한 정보도 줍니다(repl.it). 1 - 4. ta..