티스토리

Study_Story

검색하기

블로그 홈

Study_Story

regularly-study.tistory.com/m

공하루 님의 블로그입니다.

구독자: 0

방명록 방문하기

728x90

주요 글 목록

[javaScript] 자바스크립트 데이터형 데이터형 변수에 담기는 데이터의 형태 데이터형의 종류 ● 문자형 string " 큰따옴표 " , ' 작은따옴표 ' 로 표시 var str1 = "Hello World"; var str2 = 'Nace to meet you'; //숫자도 따옴표 안에 작성하면 문자형으로 인식함 var str3 = "10"; TIP! 문자형 작성 시 큰따옴표와 ㅈ가은 따옴표를 구분하는 것이 중요! // 큰따옴표와 작은따옴표를 함께 사용한 경우 > 인식하지 못함 var str1 = "He is a tall'; // 중간에 따옴표(줄임표시를 위해)가 있는 경우 > 중간까지만 인식 var str1 = 'He's a tall'; // 중간에 따옴표(줄임표시를 위해)가 있는 경우 사용하는 방법 // 중간에 있는 따옴표와 다른 종류의 .. 공감수 0 댓글수 0 2022. 9. 15.
[javaScript] 자바스크립트 기본 자바스크립트 동적인 웹사이트를 제작 시 사용되는 프로그래밍 언어 사용자로부터 data를 받아 처리함 웹사이트를 제작 시 많이 사용되는 언어들로 HTML > 틀 CSS > 꾸미기 javaScript > 동적인 이벤트 를 생성함 TIP! - keyword (=예약어 : 미리 지정되어 있는 언어, 내장 객체등, 변수로 사용 불가) 중요 - 관습코딩 (카멜표기법) : 단어와단어를 합친 단어일 경우 시작은 소문자, 두번째 단어의 시작은 대문자 - 구조가 변경되어도 스크립트에는 영향이 없도록 코딩 (재 활용하여 사용하기 쉽게 함) 자바스크립트의 활용 범위 IoT 하이브리드 앱 (앱과 모바일웹을 합쳐 놓은 것) 서버 개발 스크립트 연결 방법 ● 내부 스크립트 연결 태그 사이에 작성 ● 외부 스크립트 연결 .js 확장.. 공감수 0 댓글수 0 2022. 9. 15.
[CSS] 벤더 프리픽스 알아보기 (Vender Prefix) 이전 크로스 브라우징 포스트에서 Vender Prefix에 대한 이야기가 나왔습니다 오늘은 이에 대해 더 자세히 알아보도록 하겠습니다 CSS들을 사용할 때 최신 브라우저에서는 대부분의 CSS를 지원하고 있지만 오래된 브라우저에서는 지원하지 않는 경우도 있습니다 벤더 프리픽스 (Vender Prefix) prefix는 접두사라는 의미 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른방식으로 지원되므로 접두사를 붙여 브라우저별로 구분 css 미지원 브라우저 기본 속성 초기 모던 브라우저 prefix 붙여서 속성 작성 최신 모던 브라우저 접두사 없이 속성 작성 접두사 종류 접두사 호환 브라우저 -webkit- 사파리, 크롬 -moz- 모질라, 파이어 폭스 -o- 오페라 -ms- 인터넷 익스플로저 TIP! .. 공감수 0 댓글수 0 2022. 8. 26.
[HTML/CSS] 크로스 브라우징 알아보기 (Cross Browsing) 구인구직을 하다 보면 크로스브라우징을 고려할 수 있는 사람이라는 요건을 적은 회사들이 많습니다 그럼 이 크로스브라우징이 무엇인지 알아보록 하겠습니다 크로스 브라우징 (Cross Browsing) W3C의 웹 표준을 활용해 웹 사이트를 제작하여 모든 브라우저에서 깨지지않고 의도대로 표현되게 하며, 다양한 웹 브라우저에서 브라우저에 상관없이 사용자가 받는 정보가 동등하게 하는 것 크로스 브라우징을 해야 하는 이유 Source: StatCounter Global Stats - Browser Market Share 그래프를 보면 각 브라우저의 점유율을 확인했을 때 70%의 사용자가 크롬을 이용 크롬을 기준으로 코딩을 할 경우 다른 브라우저에서는 표현이 되지 않을 수 있어 이 다른 브라우저를 사용하는 30%의 사.. 공감수 0 댓글수 0 2022. 8. 26.
[HTML/CSS] 배경 삽입하기 (Background) 웹 바탕을 꾸며는 배경을 넣는 방법에 대해 알아보도록 하겠습니다 배경 관련 속성 1. background-color 배경에 색을 지정하는 속성 기본 문법 예시 background-color : transparent | ; 속성 값 설명 기타 transparent 투명 배경 기본값 원하는 컬러 지정 16진수, RGB, color name 등 TIP! background-color 속성을 예외적으로 자식요소에 상속이 되지 않습니다 위와 같이 보이는 이유는 상속되어서가 아니라 요소의 배경색 기본값이 투명이기 때문입니다 2. background-image 배경에 이미지를 삽입하는 속성 기본 문법 예시 background-image : none | url ('이미지 경로') ; 속성 값 설명 기타 none 배경이.. 공감수 0 댓글수 0 2022. 8. 25.
[HTML/CSS] 그림자 효과 만들기 (Text-Shadow, Box-Shadow) 코딩으로 그래픽 효과처럼 만들 수 있는 방법 중 하나로 텍스트나 요소에 그림자를 주어 꾸며줄 수 있습니다 텍스트 그림자 효과주기 text-shadow 기본 문법 예시 text-shadow : none | 속성 값 기능 기타 none 그림자 없음 기본값 *가로 거리 (hoff) 텍스트와 그림자 사이의 가로 거리 양수 값 : 글자의 오른쪽 음수 값 : 글자의 왼쪽 *세로 거리 (voff) 텍스트와 그림자 사이의 세로 거리 양수 값 : 글자의 아래쪽 음수 값 : 글자의 위쪽 번짐 정도 (blur) 그림자가 번지는 정도 양수 값 : 글자 밖 음수 값 : 글자 안 기본값 : 0 색상 그림자 색상 현재 글자색이 기본값 텍스트에 기본 그림자 효과주기 예시 See the Pen Untitled by haru (@har.. 공감수 0 댓글수 0 2022. 8. 24.
[HTML/CSS] 박스 모델 알아보기 & 관련 속성 알아보기 (Box Model) 콘텐츠를 박스 형태로 정의 하는 방법을 박스 모델이라고 합니다 요소들을 원하는 위치에 배치하기 위해서는 박스 모델에 대해서 알아야 합니다 박스 모델에 대하여 알아보기 전에 블록 레벨 요소와 인라인 레벨 요소에 대하여 알아야 합니다 관련 포스트 [HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element) 박스 모델 (Box Model) 박스 형태의 콘텐츠로 이와 같은 형태인 요소를 박스 모델 요소라 함 블록 레벨 요소는 전부 여기에 속함 박스 모델 구성 분류 콘텐츠 영역 (contents) 패딩 (padding) 테두리 (border) 마진 (margin) TIP! 박스의 기본 값 상태를 static 상태라고 합니다 박스 모델 구성 요소 ●.. 공감수 0 댓글수 0 2022. 8. 23.
[CSS] 테두리 만들기 (Border) 테두리는 박스 요소뿐만 아니라 다양한 요소에 넣을 수 있습니다 테두리 기본 속성 ● border-style 테두리 스타일을 지정하는 속성 기본 문법 예시 border-style : none | solid | dashed | dotted | double 속성 값 설명 기타 none 선을 표시하지 않음 기본값 solid 실선으로 표시 dashed 짧은 선으로된 점선으로 표시 dotted 점선으로 표시 double 두 줄로 표시 두 줄 사이의 간격은 border-width로 지정 이 외에 속성값 알아보기 ● border-width 테두리 두께를 지정하는 속성 기본 문법 예시 border-width : | thin | medium | think border-top-width : | thin | medium | .. 공감수 0 댓글수 0 2022. 8. 23.
[CSS] 텍스트 스타일 알아보기 2 (TEXT) 전 포스트는 텍스트 스타일 중 글자, 단어와 돤련된 속성들이였습니다 이번에는 문단과 관련된 속성들에 대하여 알아보겠습니다 텍스트 스타일 관련 속성 1. text- align 글의 수평 정렬을 지정하는 속성 기본 문법 예시 text-align : left | right | center | justify 2. text- align-last 선택한 요소에서 마지막 라인만 수평 정렬 지정하는 속성 기본 문법 예시 text-align : auto | left | right | center | justify 속성 값 기능 left 좌측 정렬 right 우측 정렬 center 가운데 정렬 justify 양쪽 정렬 3. direction 글을 쓰는 방향을 지정하는 속성 기본 문법 예시 direction : ltr | .. 공감수 0 댓글수 0 2022. 8. 22.
[CSS] 텍스트 스타일 알아보기 (TEXT) 이전에 포스트한 적 있지 않나? 라고 생각하실 수 있겠지만 폰트 스타일과 텍스트 스타일은 다른 개념입니다 폰트 스타일은 글꼴, 폰트와 관련된 개념이였다면 텍스트 스타일은 글자, 단어그리고 문단과 관련된 개념입니다 텍스트 스타일 관련 속성 1. color 글자에 색을 지정하는 속성 기본 문법 예시 color : color-name | 16진수 | rgb | hsl 2. text-decoration 텍스트에 장식줄 표시하는 속성 기본 문법 예시 text-decoration : 속성 기능 속성 값 기능 기타 text-decoration-line 선의 위치 지정 none 밑줄 없음 기본값 underline 밑줄 표시 링크 기본값 overline 윗줄 표시 line-through 가로지르는(취소줄) 표시 text.. 공감수 0 댓글수 0 2022. 8. 22.
[Coding Tool] CodePen 사용 방법과 Tistory에 삽입하기 코딩 연습하기 좋은 CodePen 알아보기 CodePen은 html, css, javaScript 등의 코드를 입력하면 바로 적용되어 확인 할 수 있다는 장점이 있어 코드 연습 시 편리합니다 CodePen 사용하기 1. 회원가입하기 해당 사이트에 접속하기 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 사이트 우측 상단의 Sign Up 클릭 해당 방법들 중 하나를 선택해 회원가입 2. 새 .. 공감수 0 댓글수 0 2022. 8. 19.
[CSS] 절대 크기와 상대 크기 알아보기 CSS에서 크기를 지정하는 방법으로 절대 크기와 상대 크기가 있습니다 각각의 장단점을 알고 활용할 수 있어야 합니다 절대 크기와 상대크기 비교 절대 크기 상대크기 정의 지정된 크기 주변 요소에 상대적인 크기 차이점 사이즈가 바뀌지 않는 요소 일 때 유용함 접근성의 문제가 있음 주변 요소에 따라 크기가 달라져 비율을 일정하게 유지 가능 사용자가 직접 읽기 적합한 환경을 설정 가능 절대크기 주변 요소에 영향을 받지 않는 지정된 크기 ● px 기본적인 단위 브라우저 기본 글꼴 크기 : 16px TIP! px값은 지정된 크기에서 변하지 않아 코딩 시 틀을 잡을 때 유용합니다. 브라우저 확대/축소로 인한 크기 조절은 가능합니다 상대크기 주변 요소에 따라 지정되는 크기 사용자가 브라우저 메뉴에서 크기를 변경할 수 .. 공감수 0 댓글수 0 2022. 8. 19.
[HTML/CSS] 하이퍼링크 생성하기 웹 사용이 더욱 편리해지는 '링크' 하이퍼링크 생성하기 클릭으로 연결된 곳에 즉시 이동하여 웹 사용을 더욱 편리하게 해준는 기능 링크 태그 a 태그 - 링크 생성 해당 페이지에서 다른 페이지로 이동 시 사용 텍스트 or - 앵커 생성 a태그와 id 속성을 이용하여 한 페이지 내에서 링크 만들 수 있음, 내부 링크를 통해 그 곳으로 이동 내용 - 다운로드 링크 생성 다운로드할 수 있는 링크를 생성. #을 사용하면 해당 파일의 페이지(#page=페이지 번호)나 북마크(#bookmark)를 이용해 열 수 있음 텍스트 TIP! 서버에 올렸을 때 브라우저에 따라 오류가 있는 경우가 있습니다. 해서 복잡한 것 말고 간단한 다운로드의 경우 이용합니다. 오류 - 다운로드 받은 파일이 깨져있을 수 있습니다 - 브라우저에.. 공감수 0 댓글수 0 2022. 8. 17.
[HTML/CSS] 멀티미디어 삽입하기 텍스트와 이미지뿐만 아니라 오디오, 비디오 등 멀티미디어를 넣을 수 있게 되므로써 웹 페이지가 더욱 풍성해졌습니다 멀티미디어 삽입하기 과거 웹 브라우저에서 직접 재생할 수 없어 플러그인에 의존 플러그인 사용하기 외부파일 삽입하기 1. object 태그 웹 브라우저에서 직접 재생할 수 없는 자바 애블릿, PDF파일 같은 콘텐츠를 포함 시킬 때 사용 기본 구조 예시 2. embed 태그 웹 브라우저에서 직접 재생할 수 없는 콘텐츠를 포함 시킬 때 사용 주로 이전 브라우저에서 사용 기본 구조 예시 비디오 코덱 인코딩과 디코딩을 수행하는 것 - 인코딩 : 원본 비디오를 압축해 컴퓨터에서 사용가능한 비디오 파일로 변환하는 과정 - 디코딩 : 비디오 파일에 저장되어 있는 비디오 정보를 불러와 플레이어에 보여주는 과.. 공감수 0 댓글수 0 2022. 8. 16.
[CSS] 폰트 스타일 알아보기 (Fonts) 웹 사이트에 적합한 글꼴를 사용하는 것은 브랜드의 아이덴티티를 구축하고, 가독성을 높여 사용자가 이용하기 보다 편리해집니다 폰트 FONTS ● Web Safe Font 브라우저나 기기에 기본적으로 설치되어있는 폰트 글꼴이 설치되어 있지 않거나 정상적으로 설치되지 않은 경우도 있기때문에 100% 안전한 웹 세이프 폰트는 없습니다 그렇기에 백업 폰트에 폴백 폰트를 작성해야합니다. html,css에서 가장 사용하기 좋은 웹 세이프 폰트 목록 Arial, Verdana Helvetica Tahome Trebuchet MS Times New Roman Georgia Garamond Courier New Brush Script MT ● Fallback Font 범용 글꼴 범용 글꼴 패밀리 목록 Serif : 가장 .. 공감수 0 댓글수 0 2022. 8. 11.
[CSS] 구글 웹 폰트 사용하기 (Google Fonts) [무료 웹 폰트] 구글웹폰트 사용하는 방법을 알아보자! 웹 사이트 제작 시 웹 사이트에 적합한 글꼴을 사용하는 점이 중요합니다. 하지만 어떤 폰트를 사용하면 좋을 지 고민이지 않으신가요? 그렇다고 아무 곳에서 다운 받아서 쓰기에는 용량도 걱정되고, 저작권에 걸리지 않을까 걱정되기도 합니다. 유료로 구매하여 사용할 수 있지만 이번에는 무료 폰트 사이트 중 구글웹폰트에 대해 알아보겠습니다. 구글웹폰트 (Google Fonts) 웹에서 폰트를 불러와 웹 사이트에 적용할 수 있는 사이트 장점 무료 폰트 상업적 이용 가능 용량이 줄어듬 어느 플랫폼에서 사이트를 열어도 동일한 웹폰트 제공 구글웹폰트 사용하기 구글웹폰트 사이트 : https://fonts.google.com/ 1. 폰트 선택하기 구글웹폰트 사이트에서.. 공감수 0 댓글수 0 2022. 8. 11.
[CSS] 컬러 관련 CSS (Color) 컬러 속성 (Color) 컬러 지정 방법 ● color name 작성 브라우저에서 지원되는 색상의 이름을 작성하는 방법 ● rgb값 작성 RGB 색상의 기본색(Red, Green, Blue)을 각각 0부터 255까지의 범위의 값으로 지정한 것 웹 디자인에 많이 사용됨 HTML 삽입 미리보기할 수 없는 소스 ● hex값 작성 rgb값을 각각 00~ff까지 16진수로 나타낸 것 ● hsl값 작성 컬러, 채도, 명도를 %로 나타낸 것 브라우저에서 지원되는 color name 보러가기 컬러 적용 속성 배경 컬러 지정하기 - background 배경을 지정하는 속성 - background-color 배경을 지정하는 속성인 background 중 컬러를 지정하는 속성 background background-colo.. 공감수 1 댓글수 0 2022. 8. 9.
[CSS] CSS 선택자 (Selector) CSS 선택자 (Selector) HTML에서 스타일을 적용하고 싶은 요소를 선택하는 것 선택자 분류 단순 선택자 (Simple selectors) 요소명, class명, id명 등으로 선택하는 가장 기본적인 선택자 콤비네이션 선택자 (Combinator selectors) 단순 선택자의 관계에 근거하여 선택하는 선택자 가상 클래스 선택자 (Pseudo-class selectors) 요소의 특정 상태에 따라 선택하는 선택자 가상 요소 선택자 (Pseudo-elements selectors) 요소의 지정부분을 선택하는 선택자 속성 선택자 (Attribute selectors) 포함 하고 있는 속성과 속성값에 따라 지정하는 선택자 선택자 종류 1. 전체 선택자 모든 요소에 적용 * { } 2. 요소명 선택자.. 공감수 0 댓글수 0 2022. 8. 8.
[CSS] CSS (Cascading Style Sheets) 기본 CSS (Cascading Style Sheets) 스타일 규칙들을 한 눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것 HTML 요소가 화면에 표시되는 방법을 작성한 스타일 시트 CSS 사용 이유 - 작업 시간 단축 html만 사용할 경우 일일이 스타일 지정 - 전체 스타일 제어 css파일은 외부 파일로 저장하여 제어가능 - 유지 보수 편의성 증가 가독성이 증가하므로 유지 보수 시 편함 스타일 시트 원칙 ● 캐스케이딩의 원리 (Cascading) 스타일간의 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는 방식’으로, 같은 선택자의 같은 속성명 일 때, 속성값이 다르면 하단의 속성값을 적용 (=top-down방식) ● 스타일 상속 자식요소에서 따로 스타일을 지정하지 않으면 부모요소에 .. 공감수 0 댓글수 0 2022. 8. 5.
[HTML] 입력 양식 폼 (Form) 만들기 폼 (form) 사용자의 정보를 입력받을 수 있는 입력 양식 데이터를 입력받고 서버로 전송하는 역할. 페이지당 폼 하나만 사용 동작 방식 폼의 정보 입력 ▶ 서버 ▶ 결과 기본 문법 예시 폼 관련 속성 속성 정의 속성값 정의 action 처리할 페이지 주소 서버프로그램 파일명. (.jpg, .php, .asp) method 처리 방식 서버에 데이터를 넘기는 방식 get 주소줄과 함께 전송 (보안 취약) 크기가 작고 중요도가 낮은 데이터 처리시 사용 post 웹문서와 함께 전송 (보안 양호) 활용성이 좋음 폼 관련 태그 기본 폼 로그인정보 아이디 : 비밀번호 : 비밀번호 확인 : 메모 HTML 삽입 미리보기할 수 없는 소스 1. fieldset 폼 안에서 감싸고 있는 박스 TIP! form 안에서만 사용 .. 공감수 0 댓글수 0 2022. 8. 5.
[HTML/CSS] 폰트어썸 (Font Awesome) 사용하기 폰트어썸 기존에 사용하던 아이콘 이미지들을 아이콘폰트라는 개념으로 만들어 사용 할 수 있게해 수정 시 보다 편리해짐 폰트어썸의 장점 용량 문제가 없음 CSS 로 사이즈나 컬러가 변경가능해 수정이 쉬움 벡터이미지로 해상도문제가 없음 폰트어썸 사용방법 1. 폰트어썸 설치하기 - 다운로드해서 연결하기 https://fontawesome.com/ 해당 사이트에서 압축 파일을 다운받고 그 중 all.css 를 link 태그로 연결하기 Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com - CDN으로 연결하기 사이트.. 공감수 0 댓글수 0 2022. 8. 4.
[HTML/CSS] 이미지 삽입 / 절대 경로와 상대 경로 이미지 삽입하기 웹에서 주로 사용하는 이미지 파일 형식 파일 형식 설명 JPG / JPEG 사진을 위해 개발된 형식으로 gif보다 다양한 색과 명암표현 저장 시 압축되며 반복저장하면 화질이 떨어질 수 있음 GIF 최대 256색 표현, 투명한 배경, 움직이는 이미지 제작가능 PNG 투명 배경, 다양한 색 표현 (최근 많이 사용) img 태그 기본 구성 예시 img 연결 방식 1. CDN (Contents Delivery Network) 방식 불러오기 사이트에서 이미지를 선택 후 이미지 소스를 복사해 넣는 방식 2. 로컬 컴퓨터 이미지 불러오기 프로젝트 폴더안에 image 폴더를 생성해 다운받은 이미지를 넣고 경로를 작성해 연결하는 방식 공감수 0 댓글수 0 2022. 8. 4.
[HTML/CSS] 테이블 만드는 태그 (Table Tag) - 제목 및 설명 테이블 제목 및 설명 태그 웹 접근성과 관련 1. caption 표 제목이나 간단한 요약 및 설명을 나타내는 태그 중앙 정렬, 테이블 태그 안에 작성 AA회사 지원자 명단 이름 나이 성별 김수연 25 여 오재훈 27 남 나연우 32 남 유나희 29 여 HTML 삽입 미리보기할 수 없는 소스 2. figure, figcaption 표의 제목 및 설명을 달아주는 태그 좌측 정렬, 테이블 태그 밖에 작성 AA회사 지원자 명단 이름 나이 성별 김수연 25 여 오재훈 27 남 나연우 32 남 유나희 29 여 웹 퍼블리싱 직무 지원자 HTML 삽입 미리보기할 수 없는 소스 caption 태그와 figcaption 태그의 차이점 1. 위치 caption 태그는 table의 위에 생성 figcaption 태그는 tab.. 공감수 0 댓글수 0 2022. 7. 29.
[HTML/CSS] 테이블 만드는 태그 (Table Tag) 테이블 태그 테이블을 데이터를 보기 좋게 정리하여 보여주는 표를 의미 표는 테이블, 가로(row)는 행, 세로(column)는 열, 한 칸은 셀 이라함 테이블 구성 태그 table : 표 tr : 행, 가로 칸 th : 셀, 셀 제목, 테이블 머릿글, 가운데 정렬, bold td : 셀, 셀 내용 행 태그 안에 있는 셀 태그의 수로 열의 수가 정해짐 기본 구성 예시 1행1열 1행2열 1행3열 2행1열 2행2열 2행3열 3행1열 3행2열 3행3열 HTML 삽입 미리보기할 수 없는 소스 셀 합치기 colspan : 열 합치기 rowspan : 행 합치기 합치는 방법 1. th, td의 셀과 관련된 태그에 속성을 작성 후 합칠 셀의 수을 작성 2. 밀린 셀들 지우기 밀린 셀을 지우지 않으면 밀린 셀들도 렌더링.. 공감수 0 댓글수 0 2022. 7. 29.
[HTML/CSS] 목록을 만드는 태그 (List Tag) 목록 태그 - 리스트 문서에서 항목을 나열하는 목록을 생성 시 사용하는 태그 HTML에 리스트 관련 태그 종류 순서가 있는 리스트 (Ordered List) 순서가 없는 리스트 (Unordered List) 리스트 항목 (List) 정의형 리스트 (Description List) 정의형 리스트에서 용어 또는 이름 (Description Term) 정의형 리스트에서 해당 용어의 정의 (Description Details) HTML에 리스트 태그 종류 1. 순서가 있는 리스트 (Ordered List) - ol, li 순서가 있는 리스트의 태그는 로 정의 리스트의 항목을 로 정의 리스트 요소 앞에 숫자, 영문 등 순서를 알 수 있는 마커가 삽입됨 기본값 예시 리스트기본001 리스트기본002 리스트기본003 .. 공감수 0 댓글수 0 2022. 7. 28.
[HTML] 시멘틱 태그 (Semantic Tag) 시멘틱 태그 (Semantic Tag) 의미가 있는 태그. header, footer 등 의미가 있는 태그는 내용을 명확하게 정의함 기존의 구조는 div로 대부분의 구조를 생성 구조에 div를 너무 많이 사용하게 되어 id나 class를 사용하여 구별하였고 이런한 태그들을 대신하여 나온 의미론적 태그 시맨틱 마크업이란? div, span 등 의미가 없는 태그 대신 각 용도에 맞는 시멘틱 태그를 사용하여 의미를 잘 전달하도록 문서를 작성하는 것으로 사이트의 구조를 파악하기 용이하게 함 기존의 구조 시멘틱 구조 시멘틱 태그 사용 장점 ▶ 검색 엔진 최적화 (SEO: Search Engine Optimization) 시멘틱 태그로 구조를 생성 시 검색엔진이 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결.. 공감수 0 댓글수 0 2022. 7. 27.
[HTML] 특수 문자 작성 엔티티 코드(Entity Code) 엔티티 코드 (Entity Code) html에는 미리 예약된 문자가 있으며, 이러한 문자들을 예약어라 부름. html에서 해당 예약어를 사용할 경우 미리 예약된 방식으로 사용되므로 이를 기존의 사용 방식으로 사용하기 위하여 사용하는 문자셋을 의미. 엔티티 코드를 제외한 특수문자는 에러로 인식하므로 엔티티 코드로 작성하는 것이 좋음. 자주 사용하는 코드 엔티티 코드 문자식 표현(Entity Code) 숫자식 표현(Entity Number) › › © © © " " " & & & (공백) 엔티티 코드 사이트 https://www.w3schools.com/charsets/ref_html_entities_a.asp https://entitycode.com/ https://www.toptal.com/design.. 공감수 0 댓글수 0 2022. 7. 27.
[HTML] 에밋(emmet) 알아보기 에밋 (emmet) = 젠코딩 자동완성 플러그인. 코딩 시 태그를 빠르고 쉽게 작성하는 방법. 간단한 코드만 입력하면 자동으로 완성해줌. 사용 방법 해당 약어들을 차례대로 작성 후 Tab 작성 방법 약어 약어 기능 작성법 결과 . 클래스 생성 .classname # 아이디 생성 #idname * 반복 생성 table>tr>td*2 [] 속성 생성 a[href=#] () 그룹 생성 table>(tr>td*3)*3 {} 텍스트 작성 div{작성내용입니다} 작성내용입니다 $ 숫자. 증가값 표시 li#num$*3 요소를 작성하지 않으면 div로 생성 .newClass 코드 작성 표시 기능 작성법 결과 > 자식 요소 생성 부모 > 자식 ul>li + 형제 요소 생성 형제 + 형제 dl>dt+dd ^ 올리기 다른 .. 공감수 0 댓글수 0 2022. 7. 26.
[HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element) 텍스트 관련 요소 크게 블록 레벨 요소(대부분)와 인라인 레벨 요소(일부분)로 나뉨 가장 큰 차이점은 해당 요소가 한 줄을 차지(즉 width : 100%)하는가 임. 1. 블록 레벨 요소 (Block Level Element) : 한 줄을 차지하는 요소. 즉, 너비값을 최대로 가짐 새로운 요소을 작성 시 줄바꿈되어 새로운 줄에서 시작됨. 너비와 높이값을 지정할 수 있음. TIP! 너비나 마진, 패딩등을 이용해 크기나 위치를 지정하기 위해서는 블록 레벨 요소여야 합니다 태그 기능 참고사항 h1~h6 제목, 숫자가 작을수록 글자가 커짐 h1은 한 문서 당 한 번만 사용 p 단락, 내용 br 줄 바꾸기 단락이 생긴 것 처럼 만들 수는 있지만 웹 브라우저는 단락으로 인식하지 않음 hr 수평선 blockquot.. 공감수 0 댓글수 0 2022. 7. 16.
[HTML] HTML 기본 HTML (hypertext markup language) 하이퍼텍스트를 마크업하는 언어 웹페이지가 어떻게 구조화되어 있는지 알 수 있도록 하는 마크업 언어 - 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능 - 마크업 : 태그를 사용해 문서에서 어느 부분인지 표시하는 것 코딩할 때 기본 HTML 기준으로 코딩하기 웹표준을 준수하기 실무에 맞게 가독성있게 코딩하기 긴 코드 줄 피하기 빈 줄, 공백, 들여쓰기 적절히 사용하기 태그 소스에서 꺽쇠로 묶인 부분 태그 사용법 소문자를 사용 여는 태그와 닫는 태그를 정확히 입력하기 적당히 들여쓰기 (여러번 띄어 쓰기해도 한 칸으로 인식) 속성과 함께 사용 가능 (여는 태그에 사용) : 인라인스타일 포함 관계를 명확히 하.. 공감수 0 댓글수 0 2022. 7. 14.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.