빈코더

1. float float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다. float 속성은 이전에 레이아웃을 잡는데 정말 많이 사용되던 속성입니다. 지금은 잘 사용하지 않고 display: flax를 사용을 합니다. float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있습니다. 그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 왼쪽과 같이 부모를 벗어납니다. 그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있습니다. float을 해결하려면 clear라는 속성이 필요합니다. float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티입니다. 해결방법은 여러개가 있지만 그 중 몇 개만 소개해드려요. 해결방..

1.HTML Position 이제까지 html 코드를 작성하면, 작성한 순서대로 페이지에 그려졌습니다. CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다. 예를 들어 index.html에서 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있습니다. 복잡한 레이아웃을 만들어주는 position 프로퍼티를 배울 차례입니다. position에서 사용하는 값은 4개가 있는데 static은 거의 사용하지 않아서 넘어가겠습니다. 이번 장에서는 relative와 absolute를 배워보겠습니다. position: static; position: relative; position: absolute; position: fixe..

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..