반응형 웹-프론트(Web-Front)47 [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. [HTML.009]시멘틱(Semantic)태그 [HTML.009]시멘틱(Semantic)태그 [1] 시멘틱(Semantic)태그란? Semantic: 의미의, 의미론적인 시멘틱 태그는 "의미 있는 태그"라는 뜻으로, 인터넷 검색엔진에 나의 웹 페이지가 잘 검색되고 해석될 수 있도록 HTML 코드를 작성할 때 사용하는 태그입니다. 즉, 시멘틱 태그로 HTML을 작성하게 되면 브라우저, 검색엔진, 개발자 모두에게 요소의 의미를 명확히 설명할 수 있게 됩니다. 인터넷에는 매일 엄청난 양의 정보가 업데이트 되기 때문에 이를 처리하는 아주 효율적인 방법으로 고안된 것이 시멘틱 태그 입니다. [2] 시멘틱 태그(Semantic tag) vs 비 시멘틱 태그(Non-semantic tag) 시멘틱 태그: h1, p, img, form, label 등 요소에 대해.. 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. [HTML.008] 줄바꾸기,강조하기 [HTML.008] 줄바꾸기, 강조하기 [1] 줄 바꾸기 태그 태그는 다음 줄로 넘어가게 하는 기능이 있습니다. 태그는 단독으로 사용하기 때문에 닫는태그()가 없습니다. (예시1) (퀴즈1) 다음 "포도"에 관한 문장을 태그를 사용하여 3줄로 나타내 보세요. (포도에 관한 문장) 포도(葡萄, grape)는 포도속(Vitis) 식물의 총칭, 또는 그 열매를 말한다. 포도의 품종에는 포도(V. vinifera)·미국포도(V. labrusca)·교배종이 있다. 포도(V. vinifera)는 전파 과정에 따라 남유럽계·중앙아시아계·동아시아계 등의 재배형으로 분화하였다. 3줄로 나타낸 결과 더보기 [2] 글자 굵게 표시하기 , ~ 태그를 이용하여 글자를 굵게 할 수 있습니다. ~ 태그를 이용하여 글자를 굵게 할 .. 2022. 5. 3. [웹프로젝트.002] 카페 홈페이지 만들기(2/4) 카페 홈페이지 만들기 2/4 준비하기 1. 아래의 이미지 파일 다운받기: 웹페이지에 사용될 이미지를 압축한 아래의 파일을 다운받고 압축을 풉니다. 그리고 그 이미지 파일들을 images 폴더에 넣습니다. 2022. 3. 24. [HTML.007] 글자 나타나게 하기(<p>,<h>) [HTML.007] 글자 나타나게 하기(,) 📂 웹 브라우저에 글자를 나타나게 하기 웹 브라우저에 글자를 나타내는 방법은 여러 가지가 있습니다. 그 중에서도, "제목/단락" 을 나타내는 방법에 대해 알아보겠습니다. 🚩 [단락을 나타내자] p 태그 (paragraph, 단락) p 태그는 단락 태그라고도 부릅니다. p 태그를 사용하는 방법은 ~ 사이에 글자를 적는 것입니다. p 태그 다음에 오는 글자들은 한 줄 띄어져서 나타납니다. 위에 있는 코드처럼, 3개의 문장이 전부 한 줄씩 띄어져서 웹 브라우저에 나타났습니다. 🏁 p 태그 퀴즈 1 아래 그림의 HTML 코드를 웹 브라우저에서 실행하면 2줄로 나타납니다. 3줄로 나타날 수 있도록 고쳐보세요. (퀴즈 정답은 아래 더보기 클릭) 더보기 ❓ HTML이 깨져.. 2022. 3. 23. [웹프로젝트.001]카페홈페이지 만들기(1/4) 카페 홈페이지 만들기 1/4 [1] 카페 홈페이지 구성 index.html news.html menu.html contact.html [2] 이번에 만들 페이지는 index.html 입니다. [3] 준비하기 1. 이미지 파일 다운받기: 배경이미지, 로고이미지, 파비콘 이미지를 압축한 아래의 파일을 다운받고 압축을 풉니다. 2. index.html, news.html, menu.html, contact.html ,style.css 파일을 만들어 줍니다. 3. images 라는 폴더를 하나 만들어 1번에서 다운받은 이미지를 아래와 같이 포함시켜줍니다. 코딩 시작하기 : index.html [1] index.html 풀 코드 index.html에 아래와 같이 html 기본 와 코드를 입력합니다. 1 2 3 4.. 2022. 3. 17. 이전 1 2 3 4 5 6 다음 728x90 반응형
