본문 바로가기
반응형

웹-프론트(Web-Front)/CSS10

[CSS.023] 상위요소로 부터 상속받지 않는 태그와 속성들 [CSS.023] 상위요소로 부터 상속받지 않는 태그와 속성들 [1] button이나 input 태그는 상위 요소로부터 상속받지 않는다. 이런 태그들은 값을 상속 받게끔 inherit를 사용하면 된다. (예) button,input { color:inherit; font-family: inherit; } => color 는 상속받는 속성이지만, button, input 태그 자체가 상속을 안 받기 때문에 color도 상속이 안됨. [2] padding , border 등은 상속하지 않는 속성이므로 부모 요소에서 속성을 정의해서 자식 요소에 적용되지 않는다. 다음은 상속 안되는 속성들이다. width/height margin padding border box-sizing display background .. 2022. 6. 6.
[CSS.022] 마우스에 닿으면 글자 앞뒤에 나타나기 [CSS.022] 마우스에 닿으면 글자 앞뒤에 나타나기 [1] before, after 가상 선택자 before와 after는 요소(글, 이미지 등)의 바로 앞(before)과 뒤(after)에 글이나 이미지를 만들어 낼 수 있는 기능이 있습니다. 여기에서 중요한 점은 자식요소로서 생성되는 것이고, 실제 자식이라기 보다는 가상의 무언가를 만드는 것입니다. before, after 가상 선택자를 사용할 때는 반드시 content를 써야 합니다. [2] 실습 코드 See the Pen Untitled by wootekken (@wootekken) on CodePen. 2022. 6. 1.
[CSS.021] 레이아웃 배치 by Flex [CSS.021] 레이아웃 배치 by Flex [1] 레이아웃 배치 1 See the Pen Untitled by wootekken (@wootekken) on CodePen. [2] 레이아웃 배치 2 2022. 6. 1.
[CSS.020] 글자,이미지 가운데 정렬하기 [CSS.020] 글자 가운데 정렬하기 위 그림처럼 div 태그 안에 있는 글자와 이미지를 정 가운데 정렬하는 방법에 대해 알아보겠습니다. [1] div 태그안에 글자, 이미지 만들기 먼저, 위 그림과 같이 div 태그 3개를 만들고, 그 div 태그 안에 숫자 1, 2, 그리고 사과 이미지를 넣겠습니다. [2] 가로 방향으로 가운데 정렬하는 방법 위 그림과 같이 div 태그 안에 글자와 그림을 "가로방향"에서 가운데로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다. [3] 정 가운데에 정렬하는 방법 위 그림과 같이 div 태그 안에 글자와 그림을 "화면 정 가운데"로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다. [4] 세로 방향으로 가운데 정렬하는 방법 위 그림과 같이 div 태그 안에 .. 2022. 6. 1.
[CSS.019] Flex로 메뉴바 만들기 *[풀코드] See the Pen menuBar_by_Felx by wootekken (@wootekken) on CodePen. [1] HTML로 메뉴 글자를 작성합니다. 그리고 CSS로 아래와 같이 기본 여백을 0, 색깔을 입혀줍니다. [2] 메뉴의 글자를 꾸미고 정렬을 해줍니다. [3] 메뉴에 display: flex를 정교하여 가로로 놓이게 해주고 마우스를 메뉴에 얹였을 때 flex-grow로 크기 변화가 나타나게 해줍니다. 2022. 3. 12.
[CSS.018] Flex로 정렬하기 dd [1] Flex 레이아웃의 구조 Flex 레리아웃의 기분 구조는 위 그림과 같습니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고, 자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다. 컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다. [2] 플렉스 컨테이너 ㅇㅇ [코드 1] [코드1-실행결과] ㅇ [코드2] display: flex 아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다. [코드2-실행결과] display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다. 그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다.. 2022. 3. 8.
[CSS.016] FloxBox로 정렬해보기 [1] Flex 레이아웃의 구조 Flex 레이아웃의 기본 구조는 위 그림과 같습니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고, 자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다. 컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다. [2] 플렉스 컨테이너 [코드 1] [코드1-실행결과] [코드2] display: flex 아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다. [코드2-실행결과] display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다. 그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다. height.. 2022. 3. 1.
[CSS-015] 레이아웃 배치(Float활용) [CSS-015] 레이아웃 배치(Float활용) HTML 화면 레이아웃을 배치할 때, CSS에서 Float 명령어를 이용하여 배치를 할 수 있습니다. 그 방법에 대해서 아래와 같이 소개합니다. [1] 레이아웃 1 See the Pen CSS-layout01 by wootekken (@wootekken) on CodePen. [2] 레이아웃 2 See the Pen CSS-layout02 by wootekken (@wootekken) on CodePen. [3] 레이아웃 3 See the Pen CSS-layout03 by wootekken (@wootekken) on CodePen. [퀴즈] 레이아웃 4 아래 그림과 같이 레이아웃을 만들어 보세요. (퀴즈 정답은 아래의 "더보기"에서 확인) 더보기 See.. 2022. 2. 25.
[009] 박스모델(block, inline) 콘텐츠 영역의 width(가로 길이), height(세로 길이) 조절하기 박스 모델의 콘텐츠 영역의 크기를 지정할 때는 width(가로길이), height(세로길이) 속성을 사용합니다. width, height 속성값: px(픽셀), cm(센티미터), 백분율(%), auto 등으로 지정할 수 있습니다. width와 height는 좌우 padding과 테두리(border) 두께를 합친 값입니다. [예제1] div박스에 width와 height 적용해보기 아래 코드에서, 빨간 div 박스는 px 고정값으로 설정하여 브라우저 창의 크기와 상관없이 크기가 유지된다. 반면에 파란 div 박스는 % 값으로 설정하여, 부모요소(body), 즉 웹 문서 창의 크기에 따라 달라진다. See the Pen 009_예제1 .. 2022. 1. 7.
728x90
반응형

티스토리툴바