inline
-
Inline vs. Block vs. Inline Block이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 26. 05:20
저번시간에는 margin, padding에 대해 배웠고, 이번시간에는 display, 디스플레이에 대해 배우도록 하겠습니다 (다음시간에는 position, 포지션에 대해 배우겠습니다.) 디스플레이하는 방법 3가지, 1> block, 블록, 2> inline-block, 인라인-블록, 3> inline, 인라인에 대해 알아보겠습니다. 1> 먼저, block, 블록이 어떻게 생겼는지 살펴 보겠습니다. 박스 3개를 만든 후, 상자들의 배경색은 빨간색, 폭은 200px, 높이도 200px로 값을 주도록 하겠습니다. 여기에 border는 두께는 2px, 실선, 검은색으로 값을 주겠습니다. 그럼 이제 block, 블록 형태를 확인할 수 있습니다. 즉, block, 블록이란 바로 옆에 아무 것도 없는 디스플레이 형태..
-
CSS란?이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 16. 14:52
CSS: Cascade Style Sheet의 약자로, 웹페이지의 요소들을 꾸밀 때 사용합니다. CSS는 HTML을 HTML답게 사용할 수 있게 하고, 웹사이트를 원하는대로 꾸밀 수 있다. 즉, 정보요소와 시각요소를 분리할 수 있다.(HTML: 설계, CSS: 디자인) CSS와 HTML의 결합 1. Inline방법: 요소에 직접 적용하는 방법 2. Internal방법: head태그 내 style태그에 적용. head부분에 style을 열고 닫아줌으로써, HTML파일 상단에 CSS를 붙여주는 방법. 여러 HTML문서에 동일한 CSS를 적용하기 위해서는 복사-붙여넣기를 여러번 해야 되기 때문에, 비효율적인 방법. 3. External방법: 별도의 CSS파일을 생성. HTML문서와 CSS문서를 연결시켜, CS..
-
HTML 디스플레이이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 14. 14:48
HTML 디스플레이하는 방식에는 1. block요소, 2. inline요소, 3. inline-block요소가 있습니다. 1. block요소 자체적인 크기와 여백을 가짐. 부모 요소의 한 줄을 독점, (자기 너비에 관계없이)강제 줄바꿈. 일반적으로 다른 인라인 요소와 블록 요소 포함 가능. 예: div, h태그, ul, ol, li, article, section, form, p, header, footer, nav, ... 등 2. inline요소 내용부의 크기가 요소의 크기를 결정, 즉 자체적 크기가 없음. - 높이/너비/외·내부 여백 설정 불가 - 내용부의 가로, 세로 설정 불가 줄바꿈을 강제하지 않음. 일반적으로 인라인 요소와 데이터만 포함(블록요소 포함 불가능). 예: span,script, b..