4전 4전

flex는 웹페이지의 레이아웃을 만들 때 사용하는 방법 중 하나입니다. flex를 사용하면 크기나 내용에 관계없이 요소들을 쉽게 정렬할 수 있습니다. | 구조 정렬하고 싶은 요소들의 부모박스(container)에 display: flex 속성을 부여하면 됩니다. 박스1 박스2 박스3 .container { background-color:yellow; display: flex; } .box { background-color: orange } HTML 삽입 미리보기할 수 없는 소스 기본적으로 flex박스내부의 요소들은 같은 간격으로 한 줄로 배열됩니다. | 속성 이제 flex 컨테이너를 만들었으면 여러 가지 속성을 이용해 컨테이너의 레이아웃을 만들 수 있습니다. 일반적으로 가장 많이 사용하는 속성은 다음과 ..

태그와 태그는 특정 문장에서 한 부분을 강조하고 싶을 때 사용할 수 있습니다. 두 태그는 비슷하지만 약간의 차이점이 존재합니다. | 강조 먼저 두 태그는 글자를 강조하는 효과를 줄 수 있습니다. 안녕 하세요! 안녕 하세요! HTML 삽입 미리보기할 수 없는 소스 | 차이 1. 태그 안녕 하세요! HTML 삽입 미리보기할 수 없는 소스 먼저 태그는 그냥 해당 태그로 감싼 요소를 아무 의미 없이 찐하게(text-weight: bold) 만들어주는 태그입니다. 2. 태그 안녕 하세요! HTML 삽입 미리보기할 수 없는 소스 태그는 단순 강조보다 더욱 중요하다고 생각하는 텍스트에 사용이 되고, 태그 자체에 중요하다는 의미가 있어서 단순 디자인이 아니라 텍스트에 중요하다는 의미를 포함하고 싶을 때 사용하면 됩니다.

text-shadow는 글자 그대로 글자에 그림자 효과를 적용해 주는 속성입니다. | 사용 1. 기본 사용법 text-shadow는 기본적으로 그림자의 x축 거리, y축 거리, 블러효과 반경, 색상으로 구성이 됩니다. text-shadow: offset-x | offset-y | blur-radius | color text-shadow: 1px 5px 5px green; HTML 삽입 미리보기할 수 없는 소스 x축 거리와 y축 거리는 필수 요소입니다. 2. 디자인적 응용? -형광효과 안녕하세요 div { background-color: black; width: 200px; text-align: center; } h1 { text-shadow: 1px 1px 7px white; color: white; }..

태그의 li는 list의 약자로 말 그대로 리스트를 만들어 주는 태그이고, 태그는 보통 혼자 쓰이는 않고 태그나 태그의 내부에서 사용을 합니다. | 사용 1. 태그 내부에서의 사용 태그는 순서에 상관없는 리스트를 만들어 줍니다. - unordered list의 약자 리스트 1 리스트 2 리스트 3 HTML 삽입 미리보기할 수 없는 소스 2. 태그 내부에서의 사용 태그는 번호와 함께 순서가 있는 리스트를 만들어 줍니다. - ordered list의 약자 리스트 1 리스트 2 리스트 3 HTML 삽입 미리보기할 수 없는 소스

태그와 태그는 특별한 기능이나 의미는 없지만 스타일을 위해 CSS와 함께 쓰이는 아주 중요한 태그라고 합니다. | 차이 1. display 속성의 차이 태그는 display속성이 block이고 태그는 inline입니다. HTML 삽입 미리보기할 수 없는 소스 이처럼 태그는 줄 바꿈이 가능하고 태그는 줄 바꿈이 되지 않습니다. → 태그는 display가 inline속성이라 너비 지정이 안됨 스타 따라서 너비를 지정하려면 display속성을 inline-block으로 바꿔줘야 함

태그는 특정 URL로 연결시켜 주는 하이퍼링크를 만들어주는 태그라고 합니다. | 속성 1. href 태그에 필수로 들어가는 속성으로 연결하고 싶은 주소를 작성하면 됩니다. 블로그 홈페이지로 이동 해당 파일로 이동 2. target 태그로 연결된 창이 어떤 식으로 열릴지 설정하는 속성입니다. 현재 창에서 열림(기본값) 새창에서 열림 현재 창의 부모창에서열림(없으면 _self와 같음) 전체 창에서 가장 최상단에서 열림