한번 해보자 코딩

자바스크립트 패럴랙스 가로/세로효과 💜 parallax Effect09 코드 보기 / 완성 화면 Javascript Parallax Effect09 패럴럭스 이펙트 : 가로/세로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0ps #header { position: fixed; z-index: 10000; } .parallaxs__wrap { } .parallaxs__item { width: 100vw; height: 100vh; position: relative; } #section1 {background-color: #111; z-index: 7000;} #section2 {background-color: #222; ..

자바스크립트 패럴랙스 가로 효과 💜 parallax Effect08 코드 보기 / 완성 화면 Javascript Parallax Effect08 패럴럭스 이펙트 : 가로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04 05 06 07 08 09 scrollTop : 0ps #header { position: fixed; z-index: 10000; } .parallaxs__wrap { position: fixed; left: 0; top: 0; display: flex; } .parallaxs__item { width: 100vw; height: 100vh; position: relative; } #section1 {background-color: #111;} #section2 {backgro..

자바스크립트 패럴랙스 리빌 효과 💜 parallax Effect07 코드 보기 / 완성 화면 01 Section1 네가 믿을 수 있다면, 넌 이미 반 이긴 것이다. 02 Section2 성공의 비결은 시작하는 것이다. 03 Section3 불가능은 무엇인가? 단지 미래의 가능성을 아직 발견하지 못한 것일 뿐이다. 04 Section4 계획이 없다면 실패를 계획한 것이다. 05 Section5 내일의 나를 더 나은 사람으로 만들기 위해 오늘 노력하라. 06 Section6 기회는 문을 두드리지 않는다. 우리가 문을 열어야 한다. 07 Section7 성공은 무엇보다 인내와 노력을 요구한다. 08 Section8 어려움은 성장의 씨앗이다. 09 Section9 가장 큰 모험은, 우리가 꿈꾸는 세상을 만들기 ..

자바스크립트 패럴랙스 효과 03_숨김메뉴, 탑버튼 💜 parallax Effect03 코드 보기 / 완성 화면 이번 패럴랙스 효과는 스크롤했을 때 사라지는 메뉴바와 아래로 다 스크롤 했을 때 나타나는 탑버튼입니다. HTML Top 클릭하면 화면 상단의 header부분으로 넘어갈 수 있게 Top버튼을 만들어줍니다. script window.addEventListener("scroll", () => { let scrollTop = window.pageXOffset || window.scrollY; if (scrollTop > document.body.scrollHeight - 1000) { document.querySelector(".parallax__top").classList.add("show"); } ..

자바스크립트 패럴랙스 이펙트 02_사이드메뉴 💜 parallax Effect02 코드 보기 / 완성 화면 HTML Javascript Parallax Effect02 패럴럭스 이펙트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 네가 믿을 수 있다면, 넌 이미 반 이긴 것이다. 02 Section2 성공의 비결은 시작하는 것이다. 03 Section3 불가능은 무엇인가? 단지 미래의 가능성을 아직 발견하지 못한 것일 뿐이다. 04 Section4 계획이 없다면 실패를 계획한 것이다. 05 Section5 내일의 나를 더 나은 사람으로 만들기 위해 오늘 노력하라. 06 Section6 기회는 문을 두드리지 않는다. 우리가 문을..

자바스크립트 콜백함수 종류 콜백함수 -callback function 다른 함수에 전달되어 그 함수가 어떤 이벤트가 발생했을 때 실행되는 함수 즉, 콜백함수는 다른 함수의 인자로 전달되어 호출된다. { function func(){ document.write("2. 함수 실행"); } function callback(str){ document.write("1. 함수 실행");//이게 먼저 실행 str(); } callback(func); } 결과값은 1. 함수 실행 2. 함수 실행 func()는 2. 함수 실행을 출력하고, callback은 1. 함수실행을 출력합니다. 그 이후 인자로 전달받은 함수를 호출합니다. callback(func)를 호출해 callback함수는 func 함수를 인자로 받아 호출합..

자바스크립트 게임 이펙트_음악재생(반복, 재생목록 등) 저번에 했던 음악 재생에 이어 오늘은 음악재생 목록 불러오기와 반복재생 등의 작업을 해보겠습니다 전의 작업내용이 궁금하다면 아래 링크로 확인해주세요~! 코드 보기 💜 게임 이펙트 코드 보기 / 완성 화면 HTML music 노래 제목 작가 이름 0:00 3:55 뮤직 리스트 주석된 곳의 내용을 스크립트로 작업해줍니다. 선택자 const musicRepeat = musicWrap.querySelector("#control-repeat"); const musicListBtn = musicWrap.querySelector("#control-list") const musicList = musicWrap.querySelector(".music__list");..

포트폴리오 메인페이지 만들어보기(gsap) 💜 포트폴리오 메인페이지 코드 보기 / 완성 화면 폰트CSS @font-face { font-family: 'PPNeueWorld-CondensedRegular'; font-weight: normal; font-style: normal; src: url('fonts/PPNeueWorld-CondensedRegular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'PPNeueWorld-ExtendedThin'; font-weight: normal; font-style: normal; src: url('fonts/PPNeueWorld-ExtendedThin.woff2') forma..

자바스크립트 게임 이펙트 _음악 재생 💜 게임 이펙트 코드 보기 / 완성 화면 HTML music 노래 제목 작가 이름 0:00 3:55 뮤직 플레이어 구역을 추가해줬습니다. js const allMusic = [ { name: "1. Who Do You Think I Think You Are", artist: "Mini Vandals", img: "music_view01", audio: "music_audio01" }, { name: "2. The Monuments and Tunnels in Goa and Hampi", artist: "Bail Bonds", img: "music_view02", audio: "music_audio02" }, { name: "3. We Cruisin'", artist: ..

게임 이펙트 01 💜 게임 이펙트 코드 보기 / 완성 화면 HTML JIN GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 현재 맥을 사용하고 있으면, 화면 크기는 1920 X 760입니다. 헤더에 사이트 제목과 시간을 설정해줄거고, 메인에 아이콘을 설정해줄 구간을 정해줍니다. 푸터엔 OS크기를 구현해줄 위치를 잡아줍니다. script jQuery, jQuery UI, 그리고 GSAP 라이브러리를 사용해 컨테이너 내에 있는 아이콘을 드래그 가능하게 만드는 코드를 가져옵니다. jQuery 는 javascript를 기반으로 한 오픈 소스의 빠르고 가볍고 기능적으로 강력한 javascript 라이브러리 입니다. 웹 개발에서 HTML문서의 조작, 이벤트 처리,..

자바스크립트 문자열 객체 정리 자바스크립트 문자열 객체 at() charAt() charCodeAt() codePointAt() concat() localeCompare() normalize() padEnd() padStart() repeat() at() "문자열".at(위치값); - 주어진 위치값에 해당하는 문자를 반환 - 위치값은 0부터 시작, 음수값도 허용 - 문자열의 범위를 벗어나면 undefined를 반환 "javascript refernce".at(0); //j "javascript refernce".at(1); //a "javascript refernce".at(-1); //e "javascript refernce".at(-7); //e "javascript refernce".at(-7); ..

자바스크립트 시험 오답 01.(X) { let i = 0; let sum = 0; while(i < 10){ i = i + 1; if(i % 3 == 0)sum -= i; if(i % 3 == 1)sum += i; if(i % 3 == 2)sum *= i; } console.log(sum) } ✨ 정답보기 129 🐾 풀이 10보다 작은 동안 반복하는 while루프를 실행합니다. 반복문이 한 번 실행될때 i의 값이 1씩 증가해 1부터 10까지의 값을 가지게 됩니다. i가 3의 배수일때마다 sum에서 i를 빼고 i를 3으로 나눈 나머지가 1일 경우 sum에 i를 더해줍니다. i를 3으로 나눈 나머지가 2일 경우 sum에 i를 곱해줍니다. 반복문이 종료된 후 최종적으로 sum의 값을 출력합니다. 02. { l..

자바스크립트 패럴랙스 이펙트 _애니메이션 💜 패럴랙스 이펙트 코드 보기 / 완성 화면 scrollTop scrollTop값을 먼저 구해줘야 합니다. script 스크롤에 따라 요소를 애니메이션 하는 라이브러리 skrollr을 불러오는 스크립트 태그를 사용해 작업해줍니다. let a = skrollr.init() Skroll라이브러리를 초기화 하여 s 라는 변수에 할당합니다. window.addEventListener("scroll", () => {}) 윈도우의 스크롤 이벤트를 감지하고 콜백 함수를 실행합니다. let scrollY scrollTop 변수에 스크롤의 상단위치를 저장 window.pageYOffset은 IE에서 사용되는 스크롤 위치 속성이고, window.scrollY는 다른 브라우저에서 사..

자바스크립트 패럴랙스 이펙트 01_메뉴효과 💜 parallax Effect01 코드 보기 / 완성 화면 HTML Javascript Parallax Effect01 패럴럭스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 네가 믿을 수 있다면, 넌 이미 반 이긴 것이다. 02 Section2 성공의 비결은 시작하는 것이다. 03 Section3 불가능은 무엇인가? 단지 미래의 가능성을 아직 발견하지 못한 것일 뿐이다. 04 Section4 계획이 없다면 실패를 계획한 것이다. 05 Section5 내일의 나를 더 나은 사람으로 만들기 위해 오늘 노력하라. 06 Section6 기회는 문을 두드리지 않는다. 우리가 문을 열..

Unsplash 이미지 랜덤으로 사진 불러오기 모던자바스크립트 마무리 문제 1 명언랜덤표시 모던자바스크립트 마무리 문제 1 명언랜덤표시 오늘은 모던자바스크립트 책의 p.520 마무리문제를 만들어보도록 하겠습니다. 명언 js파일을 불러와 화면에 보여주게 합니다. 추가적으로 10초에 mi-1119.tistory.com 바로 전에 했던 모던 자바스크립트 마무리 문제였던 명언 json파일 가져와 랜덤으로 보여주기에 추가적으로 unsplash의 이미지를 랜덤으로 불러와 명언과 같이 배경 이미지도 10초마다 바뀌게 설정해줬습니다. 💜 명언 코드 보기 / 완성 화면 HTML HTML은 이렇게 마무리해줬습니다. script 저번에 했던 명언과 작가 이름을 가져오는 코드에 Unsplash 에서 이미지를 가져와 페이지의 ..

블로그 만들기 CSS로 레이아웃 쉽게짜보자, 텍스트 제한 블로그 만들기를 하면서 CSS로 레이아웃 틀을 미리 만들어놓고 HTML에서 입력만 해주면 바로 레이아웃이 바뀌도록 작업해줬는데요 정리를 한번 해보겠습니다. HTML Javascript Topic 지속적인 학습과 개발 IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. 더보기 팀워크와 소통 능력 향상 개발자는 혼자서 일하는 경우가 드뭅니다. 대부분의 경우 팀을 이루어 프로젝트를 수행하게 됩니다. 따라서, 팀원과의 원활한 소통과 협력이 필수적입니다. 더보기 코드 가독성 및 유지보수성 고려 개발자가 작성한 코드는 다른 개발자들이 이해하고 유..

사이트 만들기 푸터 유형 코드 보기 완성 화면 사이트 만들기의 푸터 영역을 정리해보겠습니다. 피그마를 이용해 디자인 작업을 먼저 해주고 코딩으로 들어가겠습니다. 푸터 모아보기 전체글 주간 best 커피 업체 정보 원두납품 정보 커피교육 정보 커피 아카데미 업체 이벤트 & 행사 스페셜티 카페 스페셜티 로스터 커피관련 브랜드 매거진 커피뉴스 카페 투어 컨텐츠 제보 푸드&음료 커피 라이브러리 중고마켓 전체 장비 매장 커피용품 기타 SNS facebook instagram 공지사항 이용문의 쇼핑몰 사이버몰 이용약관 광고 상품 안내 2023 JINHYUNMI 커피 관련 사이트 Portfolio is Power All Rights Reserved body영역 안에 text 를 넣어줍니다. footer menu와 f..

사이트 만들기 텍스트 유형 오늘은 사이트 만들기의 텍스트 유형을 정리해보겠습니다. 💜 텍스트 유형 코드 보기 완성 화면 피그마를 사용해 디자인 작업을 해주고 코딩으로 넘어갑니다. notice 커피 맛집 찾기 요즘 유행하는 커피 콜드 브루 커피, 네이트로 커피, 핸드 드립 커피, 라떼 아트, 샷 브루 커피, 캡슐 커피 등 여러가지 커피가 있습니다. 요즘은 달달한 크림이 올라간 커피도 유행이고 쓴 에스프레소도 유행입니다. 더보기 커피 맛있는 카페 네이버 블로그나 인스타그램, 근처 카페 찾기 등과같은 검색 기능으로 카페를 찾을 수 있습니다. 전문적인 로스팅카페를 원한다면 로스팅하는카페를 검색해보면됩니다. 더보기 1일 2카페 맛있고 예쁜 카페를 하나 가면 근처에 또 좋은 카페 없나 둘러보게 됩니다. 그렇게 1일..

사이트 만들기 슬라이드 유형 오늘은 사이트 만들기 했던 유형 중 슬라이드 유형을 정리해보겠습니다 💜 슬라이드 유형 코드 보기 완성 화면 전과 동일하게 피그마로 먼저 작업해주고 코딩을 해줍니다. /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .mt10 {margin-top: 10px !important;} .mt20 {margin-top: 20px !important;} .mt30 {margin-top: 30px !important;} .mt40 ..

사이트 만들기 이미지 유형 오늘은 사이트 만들기 중에 이미지 유형에 대해 정리해보려고 합니다! 💜 이미지 유형 코드 보기 / 완성 화면 완성 화면입니다. 디자인은 피그마에서 작업해주었습니다. 맛있는 커피를 찾아서 여러 카페들을 가본 후 보기에도 예쁘고 맛있는 찐 커피맛집들을 찾아서 커피란 무엇인가 일반적으로 커피 열매의 씨앗인 커피 콩, 혹은 그 씨앗을 로스팅해 갈아서 물에 우려내서 만드는 음료 자세히보기 커피의 종류 커피의 품종은 크게 3가지로 구별 아바리카, 로부스타, 리베리카 자세히보기 body 안에 section태그를 만들어 제목들을 지정해준다. article 태그안에 이미지를 포함하고, figure 태그는 이미지를 감싸고 있는 header역할을 하고, div태그는 이미지에 대한 정보를 담고 있는..

사이트 만들기 카드타입(cardType) 정리 오늘은 수업시간에 해본 사이트 만들기 중 카트타입 정리를 해보려고 합니다. 우선 만들어본 사이트의 완성본입니다. 💜 카드 유형 코드 보기 / 완성 화면 피그마를 이용해 디자인 작업을 먼저 하고 그 틀을 가지고 코드를 작성합니다. 사용한 코드들 커피에 대해 알아보자 커피는 카페인이 포함된 차류 음료입니다. 커피는 주로 커피 콩에서 추출되며, 세계 각국에서 재배되고 있습니다. 일반적으로 커피는 커피빈, 원두, 분쇄된 커피 등 다양한 형태로 판매됩니다. 커피의 좋은점 커피는 일부 연구에서 많은 건강상의 이점이 있다는 것으로 나타났습니다. 커피는 당뇨병, 간암, 알츠하이머병 등의 발병 위험을 줄이는 데 도움이 될 수 있다는 것으로 알려져 있습니다. 자세히 보기 커피..

CSS 문자 관련 스타일 font-family 문자의 글꼴을 지정하는 속성 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ; font-size, 단위의 고찰 문자 크기를 지정하는 속성 글자 크기를 지정하지 않으면 기본값 16px이 됩니다. px 해상도에 따라 상대적으로 달라지는 기본 단위 font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위 font-size: 150%; em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위 font-size: 1.5..

CSS 레이아웃 grid 방식 정리 grid layout 은 비교적 직관적이어서 다른 레아이웃보다 사전지식이 덜 필요합니다. 예제1 가장 많이 접해본 레이아웃으로 시작해보겠습니다. header sidemenu content footer 이 박스에 grid layout을 사용한다고 선언합니다. 가로로2칸 세로로3칸이므로 grid-templat-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows에는 위부터 아래까지 세 개의 세로 크기를 지정합니다. .wrpa { display: grid; grid-templte-colums: 30% 70%; grid-template-rows: 50px 150px 50px; } 다음은 각 칼럼의 경게선 번호를 알아야 합니다. 칼럼이 두개이므..

CSS 레이아웃 flex 오늘은 레이아웃을 구성할 때 쓰는 flex방법에 대해 정리해보려고 합니다. 최신 브라우저들에서 많이 실행됩니다. flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex : display: -webkit-flex: display: -ms-flexbox: 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 예제 더보기 위의 예제와 같이 display: flex를 써주면 이렇게 레이아웃이 잘 잡힙니다. 예제에서 display: flex 를 선언하지 않으면 이렇게 레이아웃 밖에 나타납니다. flex-direction 자식 요소..

CSS 선택자 종류 14가지 오늘은 CSS의 선택자 종류 14가지를 간단하게 정리해보려고 합니다. 우선 선택자란 CSS가 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.type 선택자, id선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자, 선택자의 우선순위 이렇게 14가지의 선택자가 있는데요 그럼 하나씩 간단하게 알아볼까요!? type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. p태그 안에 글자들을 파란색으로 표시하도록 속성..

CSS float 방법에 대해 block요소는 원래 세로로만 나열되는데요!? float을 이용해 가로로 배치 할 수가 있습니다! 한번 알아볼까요!? float float은 요소를 좌측이나 우츠겡 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 유용합니다. float: left; 이렇게 작성해주면 됩니다. 속성 값 속성 설명 left 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 right 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 아래 코드를 살펴보면 float를 사용했을 때와 사용하지 않았을 때의 차이를 잘 알 수 있습니다. float을 사용하지 않았을 때 See the Pen Untitled by hyunm..

CSS선택자_id선택자와 class선택자의 차이점 id 선택자 HTML문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여 HTML 요소에 id로 이름을 붙일 때는 유일한 이름을 부여 다른 요소에 같은 id명을 또 주면 안됨 CSS에서는 id 선택자 앞에 '#'을 붙여야 함 id명이나 class명은 숫자로 시작할 수 X 영문자로 시작 [ 예시 1 ] See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. class 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성 부여 가능 여러개의 요소에 같은 class명 부여 가능 하나의 요소에 여러개의 class명 부여 가능 CSS에서는 class 선택자 앞에 ' ..

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. 수업시간에 만들어본 애니메이션인데요 너무 신기합니다! 언젠간 제가 만들고 싶은 애니메이션을 만들 수 있겠죠...? 다들 화이팅..!!

CSS 표현방법에 대해 이번엔 CSS의 기본 문법에 대해 알아보려고 합니다! 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 그 스타일이 기술된 페이지에만 적용 [ 예시 1 ] 우리를 기쁘게 하는 것들. [ 예시 1_결과 ] 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 스타일은 .css 확장자를 가진 별도의 파일로 저장 HTML에서는 태그를 이용해 선언 그 스타일을 선언한 모든 HTML 페이지에 적용 [ 예시 2 ] 우리를 기쁘게 하는 것들. [style.css] @charset "UTF-8"; p { color: red; } [ 예시 2_결과 ] @inmort css 안으로 다른..

HTML 기본 문서와 관련된 태그 오늘은 HTML의 기본 문서와 관련된 태그들에 대해 알아보겠습니다. 우선 HTML요소는 요소와 요소로 구성되어 있습니다. 요소 안에는 , , , , 그럼 오늘 알아본 기본 텍스트 태그들로 제일 기본적인 문서 구성은 이렇게 만들어볼수가 있겠죠!? 이제 여기에 텍스트 관련 태그들을 추가로 써 넣으면 내용을 추가할 수가 있습니다. 간단하게 몇가지만 살펴볼게요! 태그명 태그의 의미 및 특징 ~ 제목 표시, 일반 텍스보다 진하고 크게 표시(1부터 6까지 크기다름) 단락 만들기 줄 바꾸기 or Bold, 진하게 컴퓨터 인식을 위한 소스 코드 [ HTML 예시 2 ] See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. 위의 [ H..

HTML 구조 관련 요소들(섹션관련태그정리) 오늘은 웹사이트 레이아웃 만들 때 필요한 구조 관련 요소들에 대해 알아보려고 합니다. 구조 태그를 이용한 마크업 시멘틱 태그를 사용하면 검색 효율성과 웹 접근성의 향상, 협업 측면에서도 더욱 유리합니다. [ 예시 사진 ] 일단 사진으로 먼저 살펴보면 이렇습니다 이렇게 레이아웃을 잡을 때 사용하는거에 따라 맞게 설정을 해 주어야 작업할때도 편리하겠죠? 그럼 하나하나씩 태그의 의미와 특징에 대해 알아보겠습니다. 구조 관련 요소 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 HTML문서의 헤더 영역을 의미, 제목, 네비게이션, 검색 등을 포함할 수 있음 텍스트, 인라인요소, 블록레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없음 HTML 문서에서 맥락..

텍스트 관련 요소

시멘틱 마크업과 논리적인 순서 마크업 우선 마크업이 무엇이고, 마크업의 기본 문법 규칙은 어떤 것이 있는지 먼저 알아보겠습니다. , 반응형웹 '반응형웹'이 HTML문서에서 제목으로 사용된다고 할 경우 [예시 1]처럼 마크업을 하면, 스크린 리더에서는 그저 '반응형웹'이라고만 읽어주기 때문에 그것이 제목인지 알 수가 없습니다. [예시 2] 반응형웹 이렇게 [예시 2]처럼 '반응형웹' 부분을 제목을 의미하는 태그로 바꾸어 마크업 해 주어야 이 부분이 제목인걸 알 수 있게 됩니다. [예시 3] 이렇게 [예시 2,3]처럼 의미에 맞게 마크업 해주는 것을 시멘틱 마크업 이라고 한다. 작업자마다 콘텐츠의 의미를 해석하는 차이가 있을 수 있지만 가급적 시멘틱하게 마크업 하려고 노력하는 것이 중요! 자, 그럼 이제 논..

블록(Block)구조와 인라인(Inline)구조에 대해 태그를 배우기 전에 알아두어야 할! 블록구조와 인라인 구조에 대해 정리해보려고 합니다! 우선, 블록구조에 대해 알아보겠습니다. 블록 레벨 요소 (Block-leverl Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. [블록 예제.html] 블록 레벨 요소 블록 레벨 요소 성질 줄 바꿈이 생깁니다. ​ [블록 결과.html] 이렇게 [블록 예제]에서 마크업 했던 , , 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈이 일어나는 것을 볼 수 있습니다. 이러한 블록 레벨의 기본 요소로는 제목 ~ , 문단 , 주소 가 있습니다. *특징 줄 바꿈이 일어난다. 텍스트(문..