Front/CSS (7) 썸네일형 리스트형 CSS 속성 선택자 [att] 값에 관계 없이 해당 속성(att)을 가진 요소 [att=val] 속성(att)이 val인 요소. 이런 형태는 많이 봐서 쉽게 이해가 될 것입니다. 예) span[class="example"] ==> class가 정확하게 example인 span [att~=val] 속성(att)의 값(val)이 공백으로 분리된 단어인 요소. 예) a[rel~="copyright"] { ... } - rel에 copyright 단어가 포함된 "a" 요소 [att|=val] 속성(att)의 값이 정확히 "val"이거나 "val"로 시작하고 곧바로 "-"(U+002D)이 붙는 경우. 다음 예를 살펴보면 쉽게 이해가 되실 것입니다. 예) a[hreflang|="en"] - hreflang 속성이 "en"으로 시작하는.. 요소 가운데 정렬 HTML에서 div 안에 div를 수직으로 가운데 정렬하는 방법에 대해서 알아볼까 해요. 수직 정렬은 까다로워서 거의 억지로 하는 것 같아요. 아래 html 태그는 실험 대상이에요. 이해를 돕기 위해 기본적으로 정렬과 상관없는 CSS는 태그에 박아버렸어요. 위의 html 태그를 브라우저에서 열면 이렇게 그려져요. 파란색 div를 수직으로 정렬해볼게요. html은 건드리지 않을거에요. 1. 테이블 parent div 태그를 테이블처럼 만들어서 vertical-align 속성을 사용할 수 있게 하는 방법이에요. .parent { display: table-cell; vertical-align: middle; } 2. 포지션 직접 조정 child div 태그의 위치를 직접 가운데로 조정하는 방법이에요. ( p.. 새 일정 캘린더 화면 작업 - 작성중 - 작업 결과물 1)div안에 icon-button, button-button이 있을때 top.js의 linear layout안에 작성하면 부모 div에서 "display : inline-block"이 먹히지 않아서 각각의 element를 linear layout으로 감싸주었다. div로 감싸지 않아도 "display : inline-block"이 먹히는지는 추후에 확인해 볼 예정 - CSS 에서 새로 알게 된 것 1) ::placeholder, :before등의 사용방식이 있다는 사실을 알게 되었다. 2) icon의 content를 url(../../파일경로) 방식으로 세팅 가능하다는 것을 알게 되었다. - http get 방식으로 아이콘을 가져온다. 어떻게 각 아이콘 파일로 라우팅이 가능한지는 확인해.. CSS Selector Selector Example Example description .class .intro Selects all elements with class="intro" #id #firstname Selects the element with id="firstname" * * Selects all elements element p Selects all elements element.class div.main Selects all elements with class="main" which in div tag element.#id div#id Selects all elements with id="id" which in div tag element,element div, p Selects all elements and.. css 적용 우선순위 CSS의 특성상 중복되는 속성이 등장 할 수 있는데 이때는 아래와 같은 특정 원칙에 따라 CSS를 처리합니다. 1. 속성값 뒤에 !important 를 붙인 속성 2. HTML에서 style을 직접 지정한 속성 3. #id 로 지정한 속성 4. .클래스, :추상클래스 로 지정한 속성 5. 태그이름 으로 지정한 속성 6. 상위 객체에 의해 상속된 속성 같은 우선 순위에 있는 경우, 쪽수가 많은 경우가 우선되며, 이마저 같은 경우 CSS에서 나중에 선언한 것이 우선되어 적용된다. CSS에는 중복되는 속성 사용시 특정 순위에 따라 적용하는데, 이를 무시하고 절대적으로 우위에 가게 하고 싶다면 속성 값 뒤에!important 를 사용하면 된다. !important 는 우선순위 뿐만 아니라 디자이너-개발자간 교류.. 당신은 모를 수도 있는 CSS의 7가지 단위 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다. 웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 우리의 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다. 오늘, 저는 이전엔 알지 못했던 몇 가지의 CSS 방법을 알려드리려고 합니다. 몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 당신은 아마 단 한 번도 들어본 적 없을겁니다. 시작해볼까요. rem 어쩌면 당신에게 조금 익숙할 수 있는 단위로 시작해보죠. em은 현재의 fon.. CSS 적용_ ID, Class, And, Or, Sub CSS 적용을 하면서 아래와 같은 예제를 많이 봤을 것이다. div.lnbSpaceList.selected { //div이면서 lnbSpaceList 클래스 이면서 selected 클래스 인 것 background-color: #E2E3FB; } div.lnbSpaceList .thumbPhoto { //div이면서 lnbSpaceList 클래스안에 thumbPhoto 클래스 flex-shrink:0; width:2.13rem; height:2.13rem; background-color:aqua; align-self:center; margin-left:0.63rem; border-radius:3.12rem; } 지금부터 하나씩 보자! 오른쪽 화면같이 .top-textview-url에 vertical-al.. 이전 1 다음
