프레임워크/CSS66 [생활코딩] box model box model은 각각의 태그들이 웹페이지에 표현 될 때 그 태그의 부피감, 여백, 위치, 크기를 결정하는 것을 말합니다. 각각의 태그들은 태그 바깥쪽에 사각형의 박스와 같은 모양으로 둘러싸여 있다고 해서 박스라는 표현을 사용합니다. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero! a 안녕하세요 오새봄 inline block에서는 width, height는 적용 되지 않는다(무시된다) 2022. 1. 29. [생활코딩] inline block HTML의 태그들은 태그의 성격에 따라서 화면 전체를 쓰는 태그와 자기 자신의 크기만큼만 사용하는 태그로 나뉩니다. 이것들을 inline 방식, block-level-tag(block-level-element) 방식이라고 칭합니다. 어떤 element가 block이고, 어떤 element가 inline인 지 보도록 하겠습니다! Hello World 안녕 세상아 a 태그처럼 자신과 자신을 둘러싸고 있는 다른 텍스트, 정보와 하나의 같은 줄에 위치하는 형태의 태그(element)를 inline 태그라고 합니다. h1 태그처럼 자기 혼자 화면 전체를 다 쓰는 태그를 block-level-elements이라고 합니다. + inline이던 block이던 간에 언제든 지 inline → block / block →.. 2022. 1. 29. [생활코딩] 캐스케이딩(Cascading) [ CSS란? ] Cascading Style Sheet의 약자입니다. 즉, 캐스캐이딩(Cascading이라는 기능 또는 규칙은 CSS의 첫번째의 글자에 나올만큼 중요합니다. 웹브라우저가 있고 이 웹브라우저는 기본적으로 HTML을 해석하는 기계입니다. HTML에는 기본적인 디자인이 되어 있기는 합니다. h1 태그는 크고 h2는 그것보다 작고 h3, h4... 등 웹브라우저를 사용하는 사용자(User)도 자기가 보고자 하는 웹브라우저의 디자인에 대한 자기 결정권이 있어야 한다. (시력이 안좋으면 글자 크기를 키워야 하고, 원하는 색상으로 바꿔야 한다는 철학을 가지고 있었습니다.) 동시에 웹 페이지를 만드는 사람(Author)도 자기가 만든 웹페이지가 어떤 모습으로 보여야 할 지 결정 할 수 있는 자기 결정.. 2022. 1. 28. [생활코딩] 상속 어떤 요소에 속성 값을 줘서 효과를 주게 되면 해당 요소의 하위 요소들이 그 속성을 이어 받게 되는 성질을 상속이라고 합니다. CSS의 속성들을 모두 상속 되는 것이 아니라, 상속 되는 것이 유리한 속성들은 상속 되고 그렇지 않은 것들을 상속 되지 않습니다. 수업 내용 HTML CSS JS 2022. 1. 26. [생활코딩] 타이포그래피 - 웹폰트 [ 웹폰트란? ] : 웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용 할 수 있는 방법입니다. 폰트를 서버에서 다운로드 하는 방식이라고 할 수 있습니다. (구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용 했습니다.) Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornar.. 2022. 1. 25. [CSS] linear-gradient CSS 속성 중 linear-gradient()를 사용하면 그라데이션을 줄 수 있다. linear-gradient() - CSS: Cascading Style Sheets | MDN The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of . developer.mozilla.org See what's next body { margin: 0; height: 2000px; background-c.. 2022. 1. 25. [생활코딩] 타이포그래피 - font [ font-family ] : 폰트의 글꼴을 지정하는 속성(property)으로써 비슷비슷한 폰트들을 우선 순위에 따라서 보여주기 때문에 font-family라는 이름을 사용합니다. Hello World Hello World + serif vs sans serif : serif는 글꼴에서 사용하는 장식을 의미합니다. sans는 부정을 표현합니다. 즉, sans serif는 serif가 아니다. (장식이 없다)는 뜻입니다. [ font-size ] : 폰트의 크기를 지정하는 속성(property) Hello World Hello World [ font-weight ] : 폰트의 두께를 지정하는 속성(property)입니다. [ font-height ] : 폰트의 자간을 지정하는 속성(property)입니.. 2022. 1. 24. [생활코딩] 타이포그래피 - text-align text를 정렬 할 때는 text-align을 사용합니다. 속성에는 left, center, right가 있습니다. 그 밖에 왼쪽과 오른쪽이 공평하게 화면을 차지하게 하고 싶을 때는 text-align 속성에 justify를 넣어주면 아래의 그림처럼 왼쪽과 오른쪽이 공평하게 화면을 차지합니다. 2022. 1. 24. [생활코딩] 타이포그래피 - color color라는 속성 자체는 어렵지 않지만, 원하는 컬러를 지정하는 부분이 조금 어렵습니다. 컬러를 지정하는 방법에는 크게 세가지 방식이 있습니다. Color Name vs hex vs rgb [ Color Name을 사용 할 경우 ] Hello World Hello World [ hex를 사용 할 경우 ] 아래와 같이 #색상코드 형태로 사용 합니다. Hello World [ rgb를 사용 할 경우 ] 아래와 같이 red의 r, green의 g, blue의 b를 합친 rgb() 형태로 색상 코드가 나옵니다. Hello World CSS RGB and RGBA Colors W3Schools offers free online tutorials, references and exercises in all the .. 2022. 1. 24. 이전 1 2 3 4 5 6 7 8 다음 728x90
