coding with cong

DOCTYPE html> Document 제목 1: 메인 주제 표시 제목 2: 부주제 / 소제목 제목 3 제목 4 제목 5 제목 6 줄바꿈태그 br 태그 문단을 표시하는 P태그 문단에 대한 내용을 표시하고 보이는 그대로 출력하는 pre태그 글자를 굵게 b 태그 글자를 굵게 strong 태그 글자를 기울게 i 태그 글자를 가울게 em 태그 글자에 밑줄 ins 태그 글자에 취소선 del 태그 2 e : 2에 e승 (윗첨자 sup) log 210 : 로그 2의 10 (아래첨자 sub) 수평구분선 hr 태그 연습문제 HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> Document 자기소개 안녕하세요 제 이름은 홍길동이고, 현재 활빈당에서 의적활동을 하고 있습니다. 특징으로는 아버지를 아버지서자라..

display : flex ; // 속성 선택 사용 justify-content : ____; align-items : ____; flex-direction : ____; order: ___; justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 ..

HTML 삽입 미리보기할 수 없는 소스 NAVER

cursor : pointer : 커서가 올라가면 손가락 모양의 커서로 변경됨 무료 아이콘 사이트 https://fontawesome.com/kits/3d5e691692/setup?welcome=yes Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap..

box-shadow * text-shadow도 동일 box-shadow : 수평 수직 번짐정도 그림자크기 색상 방향 순 입력 (번짐정도,그림자크기,색상,방향 생략가능) - 방향 : insert = 안쪽 그림자 설정 box-shadow: 10px 10px 5px black ; 생성 예시

background 배경 속성 배경색과 이미지를 같이 넣는 경우 : 배경 이미지가 우선출력 -> 이미지가 출력되지 않은 부분에 색상 출력 background-color 배경 색상 background-color : pink ; background: linear-gradient(방향, 시작 색상, 끝 색상) ; 배경 색상 그라데이션 background: linear-gradient(to right, white,pink); background-size 배경 이미지 크기 background-size: 200px 200px; background-repeat 배경 이미지 반복 no-repeat : 반복없음 repeat-x : x축 반복 repeat-y : y축 반복 round : 양쪽 반복 기본값(공백) : 반복 ..

inline 태그들의 가로 길이 = 컨텐츠의 길이 (변경X) 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어있음! width 가로 길이 block 태그의 기본 가로는 100%으로 설정되어 있음 보통 부모크기의 100% 항상 자식 값의 가로길이를 늘려도, 부모값의 길이가 작으면 커지지 않는다는 것을 생각! min-width : 최소 가로길이 설정 max-width : 최대 가로 길이 설정 min, max를 이용하여 페이지 크기 조절 범위 설정 height 세로 길이 컨텐츠가 없는 경우) 0으로 자동 설정 컨텐츠가 있는 경우) 컨텐츠의 높이만큼 세로길이 자동할당 중앙에 오게 하려면 padding을 이용하여 밀어주는 방법밖에 없음!

border 태두리 border-radius 둥근 테두리 지정 border-radius: _px; 네 모서리의 반지름이 _px border-radius: _px__px__px__px; 각각 반지름 지정 border-radius: _px__px__px; 좌측부터 시계방향 지정 border-radius: _px__px; 대각선 지정 (좌상단-우하단,우하단-좌상단) border-top-right-radius: _px; 우상단 반지름 지정 border-style 테두리 선 모양 dotted : 모서리를 점선으로 지정 border-width 테두리 두께 border-width(border-??-width) border-color 테두리 색상 border-color(border-??-color) 예시

폰트 (font) 1. font-family : 글자체를 여러개 지정 - 지정하려는 폰트를 , 으로 나열 - 한글 폰트의 경우) 한글 이름과 영어 이름을 같이 사용 - 마지막은 기본형으로 지정 - "폰트명" - 폰트 이름이 굴림, Arial 등 띄어쓰기가 없는 경우) "" 따옴표 생략가능 -serif : 유사한 값으로 설정 -https://fonts.google.com/ 무료제공폰트 예) p { font-family : "맑은 고딕", "malgan gothic", serif } => 맑은 고딕이 없다면 malgan gothic- > malgan gothic이 없다면 -> serif 설정 2. css3 표준 단위 em : 배수, 부모 값 기준배수 (부모의 상대적인 값) 1em : 부모와 동일한 값 2em..

HTML 삽입 미리보기할 수 없는 소스 글자색 배경색 테두리색