Front (44) 썸네일형 리스트형 GNB · LNB · SNB · FNB GNB (Global Navication bar) 어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴를 가리킨다. 최상위 메뉴로 보통 상단에 위치하고 있다. 메인메뉴라고도 부른다. GNB사진 LNB (Local Navigation Bar) GNB를 누를 경우 소제목 형식으로 나오는 메뉴를 가리킨다. 네비게이션을 통해 특정 지역으로 가는 네비게이션 바이다 LNB 사진 SNB(SIde Navigation Bar) 일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 한다. 메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴이다. SNB 사진 FNB (Foot Navigation Bar) 하단 메뉴를 가리킨다. FNB 사진 출처: https://youngkeol.tist.. 새 일정 캘린더 화면 작업 - 작성중 - 작업 결과물 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 방식으로 아이콘을 가져온다. 어떻게 각 아이콘 파일로 라우팅이 가능한지는 확인해.. Z인덱스 속성으로 배치순서 결정하기 https://aboooks.tistory.com/83 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.. Block Element VS Inline Element Block Element Inline Element - 자동 줄 바꿈 - 줄을 바꾸지 않고 한 줄로 나란히 나열됨 - 영역은 지정 값 또는 지정 안할 시 width는 부모 요소의 가로크기, height는 컨텐츠 크기 - 영역은 컨텐츠 크기만큼 - width , height , margin , padding 값 적용 가능 - margin 좌, 우 (O) 적용 가능 - margin 상, 하단(X) 적용 불가능 - vertical-align, text-aline이 적용 불가능 - width , height 값 적용 불가능 - 상 하 여백은 line-height 속성에 의해 발생 - 인라인 속성을 블럭 속성으로 변경시 display를 속성 값을 block, inline-block 화 시켜서 임의로 속성값 적용 .. 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 2 3 4 5 6 다음
