본문 바로가기

HTML , CSS

 (9)
<html> , <css> 반응형 웹페이지 실습 오늘은 간략하게 css 와 html 그리고 결과물만 올렸습니다~ !! Document 반응형 웹페이지 반응형 웹페이지를 만들어 봅시다. * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background-color: bisque; } .container { height: 100px; max-width: 1300px; padding: 0 3rem; margin: auto; } .title-box { /* border: 1px solid black; */ text-align: center; } .title-box h1 { font-size: 1.2rem; /* color: blueviolet; */ } .ti..
<HTML> Clone 코딩 실습 3 목차 clone 코딩 영역 나누기 html ,css 작성 애니메이션 속성 https://www.kiweb.or.kr/intro?ACE_REF=adwords_g&ACE_KW=%EA%B2%8C%EC%9E%84%EC%95%84%EC%B9%B4%EB%8D%B0%EB%AF%B8&gclid=EAIaIQobChMI77zI1YvT_wIVApyWCh1e3Qq6EAAYASAAEgKxM_D_BwE 경일게임 아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr 지난 글에 이어 클론 코딩을 진행하겠습니다 마찬가지로 '경일게임아카데미' 홈페이지를 보고 따라해보려합..
<HTML> Clone 코딩 실습 2 목차 코딩 영역 나누기 html , css 코드 작성 animaition 속성 position 속성 ::after , ::before 지난 실습과 이어서 '경일게임아카데미' 홈페이지 클론 코딩을 해보겠습니다~ https://www.kiweb.or.kr/intro?ACE_REF=adwords_g&ACE_KW=%EA%B2%8C%EC%9E%84%EC%95%84%EC%B9%B4%EB%8D%B0%EB%AF%B8&gclid=EAIaIQobChMI99T-_Y7R_wIV2nmLCh3dawBnEAAYASAAEgLLw_D_BwE 경일게임 아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를..
< HTML > Clone 코딩 실습 목차 html clone 코딩 실습 https://www.kiweb.or.kr/intro? 경일게임아카데미 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아보세요. 우리는 취업에 진심입니다. 현장과 가장 닮아있는 교육을 목표로 합니다. 경일만의 후끈한🔥 관리를 받아 www.kiweb.or.kr 오늘 클론 코딩을 할 페이지는 경일아카데미 홈페이지를 따라 해보겠습니다. 먼저 클론 코딩을 하기전에 페이지가 어떻게 나눠지는지 계획을 잘 세우는것이 중요합니다! 아래 따라할 페이지를 한번 보겠습니다! 위 페이지를 보면 어떻게 영역을 나눌 수 있을까요 ? 저는 아래와 같이 나누어보았습니다. *어떻게 영역을 나누느냐는 만드는 사람마다 다르게 구분할 수 있습니다! 경일게임아카데미 logo를 맨위..
[CSS] FLEX 와 GRID 속성 목차 flex 속성 과 속성값 grid 속성 미디어 쿼리 ▶flex 속성이란 - flex를 통하여 컨테이너 안 의 자식들을 정렬을 시켜 줄 수 있는 역할을 한다 . *속성과 속성 값 display: flex; - 자식으로 있는 영역을 플랙스 속성으로 정렬 시킨다. gap: 10px; - 영역간의 간격 설정. flex-wrap: wrap; - 영역이 최소값보다 작아질 경우 영역을 아래로 내린다. justify-content: center; - 중간 기준 콘텐츠 정렬 justify-content: end; - 끝 기준 콘텐츠 정렬 justify-content: space-around; - 한 영역 기준으로 가각 여백을 일정하게 갖게 한다. justify-content: space-between; - 넓이의 ..
HTML 의 <form> 과 <input> 태그(Tag)는 무엇일까? 목차 태그(Tag)란 태그(Tag) 및 속성 과 속성값 ▶ 태그(Tag) 콘텐츠 - input 의 속성으로 부터 받은 입력값을 하나로 묶어 서버로 보내주는 역할을 하는 태그이다. - 기본으로 action= " "속성을 가지게 되며 이 속성은 어느 서버에 입력값을 보낼지 선택해준다. ( #은 아직 개인적으로 실습을 하는 것이기 때문에 통념적으로 사용한 것) - 자식 태그(Tag)로 을 가진다. * 태그는 input 태그들을 같은 영역으로 구분지어 주는 속성을 가진 태그이다. 자식 속성으로 콘텐츠 를 사용하면 구분된 영역선에 콘텐츠가 표시되어 제목역할을 한다. 아래는 위 코드로 문서에 출력된 모습이다~ ▶ 태그(Tag) 및 속성 과 속성값 - 입력값이 들어가게 할 수 있게 문서상의 구분된 공간을 갖게 해주는..
HTML '이미지','비디오','오디오' 출력 요소(Element) 목차 웹 페이지에 이미지 출력하기 웹 페이지에 비디오 출력하기 웹 페이지에 오디오 출력하기 'youtube' 영상 끌어오기 ▶ 웹 페이지에 이미지 출력하기 ※ 웹 페이지에 내가 원하는 사진을 넣고 싶을 때 아래와 같은 요소를 사용한다 - src='' " 속성의 값(큰 따옴표 내부) 에는 저장되있는 이미지의 위치와 파일의 이름을 넣어준다. - art=:" " 속성의 값(큰 따옴표 내부) 에는 이미가 없을 경우의 텍스트를 출력해준다. => 저장위치를 직접 입력할 수 있지만 / 를 입력하면 현재 HTML 저장파일 기준으로 다른 파일들을 선택할 수 있게 해준다. 밑에서 사용할 비디오 출력과 오디오 출력 또한 동일하다. ▶ 웹 페이지에 비디오 출력하기 ※ 웹 페이지에 내가 원하는 비디오를 넣고 싶을 때 아래와 같..
HTML 텍스트 관련 요소(Element) 과 <table> 요소(Element) ★html 실습 하면서 추가적으로 다룬 텍스트 관련 속성을 정리해보려 합니다~ 목차 텍스트(Text) 관련 요소(Element) 요소(Element) ▶ 텍스트(Text) 관련 요소(Element) △ 인라인 요소로 줄바꿈을 해주는 엘리먼트 . 콘텐츠 △ 인라인 요소이며 delete 의 약자. 삭제된 내용을 나타내는 엘리먼트 / 콘텐츠 가운데 줄이 표시됨. 콘텐츠 △ 인라인 요소이며 insert의 약자. 입력된 내용을 나타내는 엘리먼트 / 콘텐츠 밑에 줄이 표시됨. 콘텐츠 콘텐츠 △ 인라인 요소이며 글씨를 기울임. - 는 이름이나 명칭, 인용구를 나타날 때 주로 사용. -은 강조할때 사용 ab ab △ 인라인 요소이며 아래와 같이 표시되며 수학적 설명이나 단어의 부과 설명을 할 때 사용됨. △ 인라인 요..

티스토리툴바