빈코더

1. HTML Table List에서도 , , 과 같이 여러 태그의 조합이 필요했는데 Table 태그도 마찬가지로 여러 태그의 조합이 필요합니다. , , , , , 등이 있습니다. 테이블은 항상 태그로 감싸져있습니다. 태그 내에 행도 만들고, 열도 만들게 되는 것입니다. 한 행을 시작할 때는 로 시작합니다. tr은 table row의 줄임말입니다. 각각의 셀은 태그 내에 태그를 사용합니다. td는 table data의 줄임말입니다. Row 1, column 1 Row 1, column 2 Row 2, column 1 Row 2, column 2 여기 까지 하면 글씨는 출력이 되는데 선이 출력이 안됩니다. css에서 추가해줘야 합니다. 선추가는 나중에 한번해 해주기로 합시다. 이번엔 테이블 열의 제목 추가..

1. HTML List List를 표시하는 태그는 입니다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 목록에서 List, Set, HashMap.. Search까지 목록 아이템 하나하나를 태그로 감싸줍니다. 그리고, 목록 전체를 태그로 감싸줍니다. 은 ordered list라는 의미로, 결과 화면과 같이 목록에 숫자를 달아줍니다. 왼쪽 결과 화면을 보면, 우리는 숫자를 쓰지 않았는데 자동으로 numbering 되었네요. 숫자 말고 다른 것도 가능합니다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 태그는 unordered list라는 의미입니다. 숫자 없는 목록을 표현해줍..

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. CSS selector 이번엔 selector의 표현과 우선순위에 대해서 알아보겠습니다. 아래는 앞 내용을 아신다면 다 아시는 css입니다. p { font-size: 20px; } .p-tag { color: gray; } #third-line { text-decoration: underline; } copied! class나 id가 selector일때 태그와 결합할 수 있습니다. 첫 번째는 p태그이면서 p-tag 클래스이다. p.p-tag { color: gray; } 두 번째는 p태그이면서 third-line 아이디이다. p#third-line { text-decoration: underline; } 여러 selector를 사용할 수도 있습니다. 아래 css에서 최종적으로 적용되는 select..

1. CSS 상속(Inheritance)과 그룹(Grouping) 상속(Inheritance)과 그룹(Grouping)에 대해 알아 봅시다. 1. 상속(Inheritance) 상속(Inheritance)은 css가 가진 특성입니다. 말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미입니다. body { color: red; font-size: 15px; } body라는 태그에 color는 빨간색으로, 크기는 15px로 스타일했습니다. 그리고 body 태그안에 p 태그가 있다고 가정하고 진행을 해보도록 하겠습니다. 나는 자식이다 따로 p 태그에 css 설정을 해주지 않고 body 태그에만 속성 설정을 해주었는데 p태그가 글씨는 빨간색 사이즈도 15px 사이즈로 변했습니다. 위와 같이 상위..

1. Box-sizing box-sizing에 대해서 알아봅시다. css 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용이 됩니다. width + padding + border = 요소의 실제 너비 height + padding + border = 요소의 실제 높이 즉, 요소의 너비 / 높이를 설정할 때 요소가 설정 한 것보다 더 크게 나타나는 경우가 많습니다 (요소의 테두리와 패딩이 요소의 지정된 너비 / 높이에 추가되기 때문). 따라서 크기를 설정할 때, 원하는 크기를 얻으러면 테두리나 안쪽 여백을 고려해야 합니다. 예를 한번 들어 볼까요? .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { w..

1. Border border(테두리)는 앞에 8장에서 잠깐 나온 스타일 입니다. p { border: 5px solid red; } span { border: 1px dotted #0000ff; } border: 두께 선스타일 선색깔; 위와 같이 코딩하시면 됩니다. 선 스타일의 종류입니다. dotted dashed solid double groove ridge inset outset 이 중에 거의 solid만 사용하지만, 다른것도 알아두시면 좋습니다. 선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다. blockquote { border-top: 4px double red; border-right: 2px solid #666666; border-bottom: 6px..

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