웹사이트에서 링크 연결은 가장 많이 사용하는 기능 중 하나이다. 이때 링크 연결은 .. 태그로 만든다. 태그에서 img 를 지정해주면 이미지 링크가 되고, 텍스트로 지정해주면 텍스트 링크가 된다. href 속성을 사용해서 경로를 지정해준다. 1. 텍스트 링크 2. 이미지 링크 이때 기본 설정은 이 하이퍼링크를 누르면 기존페이지에서 지정한 페이지로 이동하게 되는데, 원래 페이지로 돌아가고싶으면 뒤로가기 버튼을 눌러야하는 다소 불편한 점이 존재한다. 따라서 target = "_blank"를 추가해주면 새로운 페이지에서 웹 문서가 열리게 된다!

1. 태그 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, pdf 등 다양한 멀티미디어 파일을 삽입할 때 사용한다. 태그를 사용하면 이런식으로 pdf 도 웹 브라우저에 추가해줄 수 있다. 2. 태그 embed 태그는 대부분의 브라우저에서 적용할 수 있는 태그로 와 비슷하게 오디오, 비디오, 이미지 등 다양한 멀티 미디어 파일을 삽입할 수 있다. 3. , 태그 이 두 태그는 사용법과 속성 모두 비슷하다. 태그에서는 html에서 배경음악이나 효과음 등 오디오 파일을 삽입할 때 사용한다. 태그에서는 비디오 파일을 삽입할 때 사용한다. 이때 controls 속성을 지정해주면 삽입한 파일에 사용자가 재생을 멈출 수 있도록 해준다. * , 속성 controls : 삽입한 파일에 컨트롤 바를 표시해 사용자가 재..

웹 문서에 이미지를 추가하고 싶을때는 태그를 사용한다. 1. src 속성 태그의 src 속성은 이미지 파일의 경로를 지정하는 속성으로 반드시 지정해줘야한다. 이미지나 음악, 동영상 등을 웹 문서에 저장할 때는 경로를 주의해서 지정해줘야한다. 경로가 정확하지 않으면 웹 브라우저 화면에 이미지가 나타나지 않는다. 이미지 경로는 웹 문서의 위치를 기준으로 정한다. 2. alt 속성 는 이미지를 대신해서 읽어 줄 텍스트를 입력하는 것이다. 3. width, height 속성 태그에 별다른 속성을 지정해주지 않으면 원본 이미지 크기 그대로 나타나게 된다. width와 height 속성은 각각 이미지의 너비와 높이를 지정해주는 속성이다. 단위는 %와 px인데 기본이 px이라 px 단위는 작성하지 않아도 된다. ex..

우선 표를 만들기 위해서는 표의 시작과 끝을 알려주는 ... 태그를 표시한 후에 표와 관련된 태그를 모두 넣어준다. 1. ... 표에 제목을 추가하고 싶을 때 사용하는 태그이다. 2. .., .. 태그는 행을 만들고, 태그는 행 안에 있는 셀을 만든다. 이 두 태그는 모두 사용해야 하나의 셀을 만들 수 있다. 3. .. 표의 제목 행에 셀을 만들 때는 태그 대신 태그를 사용한다. 4. , , 표에 제목과 본문, 요약이 있는 부분으로 표의 구조를 나눌 수 있다. 5. rowspan, colspan rowspan은 행을 합칠 때 사용하는 속성이다. colspan은 열을 합칠 때 사용하는 속성이다. 6. , 특정 열에 배경색을 넣거나 너비를 바꾸려는 등 원하는 열을 선택해서 지정해줘야하는데, 이럴때 과 태그를..

1. 순서가 있는 목록 태그 태그를 사용해서 만든다. 사진과 같이 type 과 start를 지정해줄 수 있다. type = "1" : 숫자 type = "a" : 영문 소문자 type = "A" : 영문 대문자 type = "i" : 로마 숫자 소문자 type = "I" : 로마 숫자 대문자 그리고 start를 3으로 지정하면 3부터 숫자를 시작한다는 뜻이다. 2. 순서가 없는 목록 태그 , 태그를 사용한다. 3. 설명 목록을 만드는 태그 태그 안에 , 태그를 넣어주는데 태그는 이름 부분을 지정하는 태그 태그는 설명 부분을 지정하는 태그이다.

1. 제목을 나타내는 태그 제목을 나타내는 태그는 부터 까지 존재하는데 이 글자크기가 가장 크며 점점 작아진다. 그리고 제목태그는 반드시 닫는 태그도 해줘야한다. 2. 텍스트 단락의 태그와 줄 바꿈 태그 태그를 사용하면 텍스트를 입력하고 앞뒤로 빈 줄이 생기며, 텍스트 단락이 만들어진다. 그리고 html 에서는 아무리 줄을 바꿔서 텍스트를 입력해도 줄 바꿈이 일어나지 않는다. 줄 바꿈을 하기 위해서는 태그를 사용해줘야한다. 3. 인용 태그 이 태그를 사용하면 살짝 다른 텍스트보다 들여 쓰여진다. 4. 텍스트를 굵게 표시하는 태그 과 이 두개의 태그는 실제 결과를 보면 똑같지만 화면 낭독기에서 읽을 때 차이가 있기 때문에 구분하줘야한다. 은 경고나 주의사항처럼 중요한 내용을 강조할 때 사용 는 단순히 글자..

1. 시맨틱 태그 ( semantic) html 태그는 이름을 봐도 의미를 알 수 있어 시맨틱태그라고 한다. ex) 대충 어떤 역할을 하는지 알 수 있는 것처럼 2. 시맨틱 태그가 필요한 이유 1) 시맨틱 태그를 사용하면 웹 브라우저가 html 소스 코드만 보고도 어느 부분이 제목이고 메뉴이며, 본문인지를 쉽게 알수 있기 때문이다. 2) 문서 구조가 정확히 나눠지기 때문에 pc나 모바일 웹의 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽기 때문이다. 3) 마지막으로 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확하게 찾을 수 있기 때문이다. 3. 시맨틱 태그 종류 1) 태그는 말 그대로 헤더 영역을 의미하며, 사이트의 헤더는 주로 맨 위쪽이나 왼족에 있고, 헤더에는 검색창이..

visual studio code에서 코드를 작성한 후에 실시간으로 웹에서 확인하기 위해서는 라이브 서버를 설치해주면 된다. 저 부분 클릭한다. 그리고 검색창에 live server 검색하고 install 하면 되므로 아주 간단하다. 그러면 바로 open with live server 클릭하면 웹 브라우저에서 확인가능하다.

1. HTML이란? 간단히 웹 문서를 만드는 언어라고 할 수 있다. HTML은 Hyper Text Markup Language로 학교 시험문제(?) 단골로 나왔었는데,, ㅎ 아무튼 html은 그런 뜻이다. HTML은 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미한다. 2. HTML의 구조 HTML의 가장 기본적인 구조이다. : 현재 문서가 html5로 작성한 웹 문서라는 것을 알려준다. : 웹문서의 시작과 끝을 지정한다. : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분이다. : 실제로 웹 브라우저 화면에 나타나는 부분이다. 2-1. 은 문서 유형을 지정해주는 태그인데, 현재 문서가 HTML5 문서라는 것을 알려주는 태그이다. 2-2. .. 태그를..

du : 현재 디렉토리에서 하위 디렉토리까지의 사용량 확인 du -s : 전체 사용 사용량 확인 du -a : 현재 디렉토리의 사용량을 파일 단위로 확인

소스 코드를 작성할 때 숫자 1이랑 영어 l 또는 영어 O나 숫자 0 구분이 힘든 경우가 있다. 이런 상황을 방지하기 위해 D2Coding 글꼴이 한글도 제대로 표시되면서 소스코드도 잘 구별해준다고 한다. https://github.com/naver/d2codingfont GitHub - naver/d2codingfont: D2 Coding 글꼴 D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 이 홈페이지에 가서 최신 버전 설치 후 zip 파일 다운 받는다. 압축을 풀고, 다운로드 파일에서 D2CodingAll 폴더를 선택하고, 그안의 글꼴 파일을 설치한다. 그 후, ..

정말 기초이긴 하지만 그냥 개념을 정리하자는 의미에서~,, 1. HTML Hyper Text Markup Language 로 웹 브라우저 창에 웹 문서의 내용을 보여주는데 필요한 약속이라고 할 수 있다. HTML은 웹 브라우저에서 어디가 헤더이고, 어디가 이미지이며, 어디가 제목인지에 대한 웹 요소를 알려주는 역할을 한다. 즉, HTML은 웹 브라우저의 뼈대?를 만드는 역할이라고 생각하면 된다. 2. CSS HTML로 웹 요소를 만들고, 사용자가 보기 편하도록 꾸미고, 배치할 때 사용하는 것이 CSS이다. CSS로 반응형 웹을 만들기도 하고, 필요한 곳을 강조할 수 있다. 3. JavaScript 웹 사이트는 정적사이트와 동적사이트로 나눌 수 있는데, 기업용 홍보 페이지와 같이 사용자에게 단순히 정보만 ..