CSS26 CSS] display 속성 / block, inline, inline-block, none Display 속성 display는 컨텐츠(element)의 가로 길이를 정하는 속성이다. block, inline, inline-block, none 4가지 벨류에 대해 알아보자. display의 밸류 4가지 1 Block 가로 길이(width)가 화면 전체를 차지한다. 기본 설정이 block으로 지정되어 있는 태그 html에서 h1을 입력해보면 글자는 몇 개없는데 가로 길이는 화면 끝까지 차지하는 것을 볼 수 있다. html에서 h1은 가로 화면 꽉차게 차지하라고 기본 설정 되어있다. 가로길이가 화면 끝까지 차지하면 그 옆에 다른 컨텐츠가 올 수 없다. h1은 가로 길이가 화면 끝까지 차지하기에 다른 element를 h1 옆으로 나란히 놓을 수 없다. 다른 element는 다음 줄로 내려간다. Hel.. 2021. 6. 28. CSS] box, padding 알아보기. box란? html에서 하나의 내용을 입력하면 자동으로 박스가 만들어진다. 이 박스는 내용을 감싸고 있다. CSS에서 효과 줄 때 유용하게 사용된다. element, padding, border, margin 란? 이 박스 안에는 4가지 요소가 들어있다. element, padding, border, margin 1. element element는 입력한 내용물이다. 텍스트를 입력하면 텍스트가 element이다. 이미지를 입력하면 이미지가 element이다. 2. Padding 패딩은 내용물과 보더 사이의 공간이다. 패딩을 위 아래 양 옆 모두에 100px씩 넣어주면 내용물과 박스 경계선과의 사이가 벌어지고, 글자도 모아지고 박스도 커지게 된다. 패딩 없을 때 패딩 넣었을 때 각각 값을 따로 주고 싶을 .. 2021. 6. 28. 에러 확인하는 법: console에서 확인 Console 들어가는 법 1 view-> Developer -> Developer Tools -> Console 확인 2 F12 -> Console 3 화면 오르쪽 클릭 -> inspect -> Console console에 들어가면 현 페이지에 대한 에러 메세지를 볼 수 있다. 2021. 6. 23. hr 효과주기 / 여러 군데에 있는 태그에 같은 효과 넣기 여러 태그에 같은 효과 넣기 브라우저에 가로줄 는 이미 여러개가 있는데 html에서 효과 넣을려면 을 일일이 찾아서 효과를 넣어줘야 한다. 이런 경우 에러가 날 확율이 높고 시간도 걸리고 번거롭다. CSS에서 한 번에 바꿔 주는게 효과적이다. CSS에서 바꾸고자 하는 태그를 적어주고, { } 안에 변경 사항을 적어준다. 흰색 긴 라인으로 바꾸기 의 색을 바꿀려서 background-color: white;로만 원하는 색을 써준다고 색이 바뀌지 않는다. background는 보더를 뺀 가운데 알맹이를 말한다. border 자체도 박스로 되어있다. 디폴트로 위아래 양 옆으로 1px씩 inset 형태로 기본 색이 들어가있다. 그래서 border를 없애고 나서 순수 background에 height를 줘서 눈에.. 2021. 6. 23. CSS 시작/ external CSS 유용한 사이트 Pesticide 구글 크롬 익스텐션으로 설치한 후 개발자모드로 체크하거나 Allow access to file URLs를 켜두기 CSS Default Browser 브라우저에 기본적으로 깔려있는 CSS 효과 https://www.w3schools.com/cssref/css_default_values.asp MDN reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference 디자인 참고 션할핀 개인 홈피 https://www.seanhalpin.design/ CSS 시작하기 CSS는 HTML으로 만든 기본 골격에 스타일을 넣기 위해 사용한다. HTML에서도 색을 바꾸거나 하는 스타일을 변경할 수 있기는 하다. 만약 HTML에서 .. 2021. 6. 22. 이전 1 2 다음
