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..

시맨틱 웹 (Semantic Web) 시맨틱 태그 (Semantic Tag) 시맨틱 웹 (Semantic Web) 의미 시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 한다. * 메타데이터의 목적은 정보검색의 처리과정을 줄여주고, 사용자가 원하지 않는 데이터를 미리 걸러주며, 관련성이 많은 정보의 발견 가능성은 높여줌으로써 정보검색을 향상 시키기 위한 것이다. 시맨틱 웹의 사용 많은 사용자들이 필요한 정보를 얻기 위해 Goolgle 이나 Naver과 같은 검색엔진을 이용한다. 즉, 웹사이트들은 이러한 검색엔진에 노출되어야만 외부로부터의 유입을 일으킬 수 있다. ..

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") 두개는 ..