YEV.log

PC 버전을 구현할 때, 메인의 너비를 1024px로 설정하고 margin:0 auto; 를 사용하여 가운데 정렬하여 작업을 하는 도중, 메인 콘텐츠의 중간 요소의 너비를 화면 전체로 구현하고 싶었습니다. .넓히고자하는요소 { width: 100vw; margin-left: 50%; transform: translateX(-50%); } 해결법은 간단했으며, 전체 풀로 채우고자 하는 요소에만 css를 추가하면 됩니다. 결과화면 https://www.milindsoorya.com/blog/css-to-ignore-parent-padding

display inline block inline-block float display CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다. inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. inline 엘리먼트를 사용할 때 주의할 점은, 콘텐츠 크기 만큼만 공간을 차지하도록 되어있기 때문에 width와 height 속성을 지정해도 무시된다는 것이다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다. inline 요소의 종류의 태그 a, abbr, acronym, b, bdo, big, br, but..

position position 사용법 position position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정하며 top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. position 사용법 static (기본값) : 위치를 지정하지 않을 때 사용한다. relative : 요소 자기 자신을 기준으로 배치 absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다. static stati..

width/ height text font border / background-color / background-image transition filter width/ height %로 width,height 값을 표현할때는 바로 상위 태그에 있는 width, height값의 %로 설정이 된다. text .p{ font-size: 30px; coloe: red; text-align : center; text-decoration: underline; text-transform: uppercase; //영문자를 모두 대문자로 변환, lowercase는 소문자로 변환해줌 line-height: 3; //줄간격 letter-spacing: -1px; //문자사이의 간격 -webkit-text-stroke: 1p..

html파일에 style.css 연동하기 html에서 css를 사용하는 방법은 3가지 정도가 있다. 태그 사용 / style = ";" 이용 / style.css파일 연동. 보통의 경우에는 css파일을 연동하는 방법으로 사용한다. Selector의 종류 대부분의 경우에는 type선택자와 class 선택자를 많이 쓴다. h1{ } //TYPE 선택자 a[href="google.com"]{ } //ATTRIBUTE 선택자 #id{ } //ID 선택자 .section{ } //CLASS 선택자 h1,p{ } //그룹 선택자 class선택자는 하나의 태그에 2개의 class를 지정할 수 있다. (class = "intro paragraph_01" / class = "intro paragraph_02") 두개는 ..