본문 바로가기

CSS

 (28)
캐스케이딩 엘리먼트는 다양한 CSS 선언의 영향을 받는다. 이 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 함. 캐스케이딩에는 다음과 같이 세가지 규칙이 있음. 중요도 - css가 어디에 선언 되었는지에 따라서 우선순위가 달라짐 명시도 - 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아짐 소스순서 - css 선언을 나중에 할수록 우선순위가 높아짐 css는 다양한 위치에서 기술될수 있는데, 그 위치에 따라서 우선순위가 달라진다. css가 기술될 수 있는 위치는 아래와 같고, 우선순위는 아래로 내려갈수록 높다. (저작자 CSS의 !important가 제일 높음) 브라우저의 CSS (예 제목) 사용자 CSS 일반선언 (오페라에서 제한적으로 사용되는 기능) 저작자 CSS 일반선언 ( h..
인접 형제 결합자 예시 안녕하세요 안녕히가세요 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택 하면 바로 적용이 됩니다. 그다음 .box + p + p 태그에도 적용이 됩니다. 조건은 같은 위치에서 같은 부모 안에서 적용시켜야 합니다.
max-witdth , max-height max-width 최대 너비이며 max-width보다 커지는 것을 방지합니다. max-height 최대 높이이며 max-height보다 커지는 것을 방지합니다. 예를 들어 이미지 크기를 정하지 않으면 부모의 요소를 벗어납니다. 하지만 max-width 설정하면 부모요소의 크기로 맞쳐진다는 것입니다. img { max-width: 100%; } 최대 크기를 부모 요소의 크기로 제한하는 것입니다. 가로 세로 비율에 맞게 크기가 줄어듭니다. www.codingfactory.net/10830 참고해서 글을 썻습니다. 감사합니다.
인접 형제 결합자 인접 형제 결합자(+)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택합니다. A + B 라고 할 경우, A 요소와 동위로 바로 인접하는 B 요소 선택. img + p { font-style: bold; } p태그는 폰트는 굵어 집니다. li:first-of-type + li { color: red; } 첫번째 li태그 바로 다음 위치한 One Two! Three Two!가 빨간색이 됩니다.
앵커<ANCHOR> 네이버 다른 문서로 이동할수 있는 링크 생성하고 href 즉 링크의 목적지가 되는 URL을 지정한다. target링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, 의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. _self: URL을 현재 브라우징 맥락에 표시합니다. 기본으로 설정되어 있음 즉 우리가 보고있던 화면 자체를 외부 페이지로 이동한다.위에 있는 네이버로 이동한 예가 아주 적절한 예입니다. _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다. 내부링크를 할때 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려 강산 대한 사..
border-radius border-radius 테두리를 둥굴게 만드는 속성입니다. 1. 속성 8군데 길이를 정해야합니다. border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 2.대각선 방향으로 값이 같을 때 사용할 수 있습니다. border-radius: aa bb aa bb / cc dd cc dd border-radius: 40px 80px / 80px 40px; 3.네 곳이 모두 같을 때 사용할 수 있습니다. border-radius: aa aa aa aa / bb bb bb bb border-radius: 80px / 40px; 4.가로 방향과 세로 방향의..
상속 html css javascript style attribute id selector class selector tag selector 우선순위 1.style attribute (태그에 가깝고 더 구체적이다.) 2.id selector (특정 아이디만 선택할수 있기 때문에 중복안됨 3.class selector (원하는 태그를 정할수 있기 때문에) 4.tag selector (포괄적이기 때문에) 구체적일수록 우선 순위가 높다. li{color:red !important;} 우선순위가 제일 높아진다. #idsel{color:blue;} #idsel{color:yellow;} .classsel{color:green;} 이 글은은 생활코딩을 참고하여 포스팅 하였습니다. egoing님 감사합니다.
flex box 이번 포스팅은 드림코딩 엘리님의 유튜브 강의를 보고 정리한 것입니다. (사진 자료는 드림코딩 엘리님의 유투브에서 캡쳐해온 자료입니다.) flexbox란? item 과 box를 행 또는 열로 자유자재로 배치해주는 기술입니다. 이 컨테이너 박스에 속성값들은 display flex-direction flex-wrap flex-flow justify-content align-items align-content 출처 드림코딩 by 엘리 item 속성값은 order flex-grow flex-shrink flex align-self flex 박스에는 중심축과 반대축이 있습니다. 지금은 수평축이 중심이고 수직축이 반대축이당 이번사진은 중심축이 수직축이고 반대축이 수평축입니다. display:flex flex-dire..

티스토리툴바