Web/HTML & CSS14 float속성과 중첩 박스 [ 박스를 가로로 배치하는 float속성 ]float속성은 사전적인 의미로 '떠오르다', '떠다니다'라는 의미를 가지고 있다.\웹 페이지에서는 float를 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용한다. 만약 배치 하지 않을 경우 float:none;속성이나 clear속성을 이용한다. - float : left; 박스를 영역의 왼쪽으로 배치한다. - float : right; 박스를 영역의 오른쪽으로 배치한다. - float : none; 박스를 배치하지 않음. [ float를 해제하는 clear속성 ]float이 적용된 박스는 해당 위치로부터 살짝 멀어지게 된다. 아래에 있는 박스들은 빈 공간을 채우기 위해 위로 치고 올라오는 현상이 생기는데,이 현상을 막고 박스를 위에서 아래로 배치하려면 c.. 2024. 6. 8. box-sizing 컨텐츠 영역에 border까지를 포함시키는 box-sizing속성★ css box model을 계산할 때 보통 width + (padding*2) + (border*2) 이런 공식으로 계산을 하지만 box-sizing속성을 이용하면 padding영역과 border영역을 컨텐츠 영역 (width/height)안에 포함시켜준다.이렇게 되면 따로 사이즈를 계산할 필요가 없게 된다. - box-sizing : content-box; : 기본값으로 padding과 border를 컨텐츠 영역에 포함시키지 않는다. - box-sizing : border-box;★ : 컨텐츠 영역 안에 padding과 border를 포함시킨다. border-box 속성 및 여러 속성과 이미지태그를 활용해봤다. - .. 2024. 6. 4. div태그와 css의 border 속성 [ 공간을 분할하는 div태그 ]div태그는 웹페이지에서 레이아웃을 만들 때 주로 사용하는 태그이다. block속성의 대표적인 태그로 너비 높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다. block속성에 너비 높이와 여백을 주고 싶을 때에는 CSS BOX MODEL이라는 개념을 알고 있어야 한다. [ CSS BOX MODEL ]block속성을 가진 모든 태그들은 박스의 형태를 가지고 있으며 원하는 위치에 배치하기 위해 css를 이용한다. 가로와 세로의 크기를 지정하고 여백과 배치 형태를 설정하여 원하는 형태를 만들 수 있다. 이런 박스 형태의 요소를 스타일 시트에서는(css) 'css 박스 모델'이라고 부른다. 박스 모델로 컨텐츠 영역을 만들 때에는 width와 height를 이.. 2024. 6. 3. css를 사용하여 웹 폰트 연결, 스타일 속성 적용 html 작업 할 때는 이미 브라우저 기본 스타일시트가 적용되어 있기 때문에 css로 초기화 작업 후 작성한다.작업을 시작 할 때는 어떤 작업을 시작하는지 주석을 달고 시작하는 버릇을 들이자.html 헤드 부분에 링크는 한번에 한개만 연결 가능.두개 이상 부터는 2줄~ 작성 브라우저 기본 스타일시트를 초기화 시켜주는 css 파일을 만들어 연결 시켜준다. css를 사용하여 웹 폰트 연결해본다.폰트를 다운 받아 설치하고 css에 기입하는 것이 아니라 폰트 사이트에서 경로를 복사하여 웹 폰트를 연결 시켜 줄 수 있다. (1~2) 일단, 상업용 무료 폰트가 많은 구글 폰트에 접속하여 사용할 폰트를 선택하고 Get font를 클릭하면 장바구니에 담긴다. (사용할 여러 폰트를 같이 넣는다) (3) 장바구니에 들어.. 2024. 6. 1. table 태그 / css 수업 시작 표를 만드는 table태그란?부모자식 태그로 이루어져 있고 이전에는 레이아웃을 만드는 태그로 사용되었다. 현재는 게시판 영역과 같은 부분에 많이 사용되는 태그로 표를 구성해준다. 부모태그인 table태그로 행과 열을 묶는다.행은 tr태그로 표현하고, 열은 td로 표현한다. 그리고 표의 제목을 나타내는 th가 있다. 이렇게 html을 구성하는 태그를 배우고 있다. 하지만 이 html만으로는 우리가 아는 웹사이트를 만들 수 없다.html을 꾸며주는 css, java script... 등을 사용하여 적용시켜 줘야 한다.그 중에 css 작성을 시작 했다. css란?html구조에 디자인을 입히는 언어. Cascading Style sheets의 약자로 위에서 아래로 흐르는 디자인시트 언어라는 의미다. 웹 문.. 2024. 6. 1. html 문서 작성 기초 (a태그, 이미지태그) html 문서를 다른 페이지로 이동할 수 있도록 연결시켜주는 a태그와 이미지를 입력하는 이미지태그를 배웠다. 본격적으로 들어가기 전에 다른 웹사이트를 예시로 html을 볼 수 있도록 F12 키를 누르거나 창에서 오른쪽 클릭하여 검사에 들어가 본다. 이렇게 개발자 도구를 열면 해당 웹사이트에 html을 볼 수 있다. 태그들이 엄청나게 많은데 배울수록 이 태그가 무슨 태그인지 다 알 수 있는 날이 오기를 바란다. VSCode를 실행하고 새로운 폴더를 만들어 넣은 뒤에 html 새 파일을 하나 만든다. 익숙하지 않아서 새 파일 만들 때 헷갈릴 수도 있지만 꼭 확장자. html 써주도록 한다! (블로그를 작성하는 지금, 일주일 정도 지나니까 꽤 익숙해졌다) [ 하이퍼 링크를 걸어주는 태그 ]a태그는 앵.. 2024. 6. 1. 이전 1 2 3 다음
