Study/HTML & CSS

[HTML] 링크(Link)

링크(Link) 태그 하이퍼링크 (Anchor)의 약자 를 사용하며, 다른 페이지로 이동하는 링크를 생성해 주는 태그이다. 추가적으로 속성을 써 주어, 그 속성 값에 이동시키고 싶은 페이지의 주소를 적으면 된다. href 속성 값 상대 경로 단순히 파일 이름만 명시할 경우, 같은 폴더 안의 어떤 파일을 의미한다. ./ 은 현재 폴더, ../ 은 상위 폴더의 파일을 지정할 수 있다. a/파일이름 => a 폴더의 파일을 지정한다. 절대 경로 파일이 있는 모든 경로를 적어 파일을 지정한다. ex) C:\Users\Administrator\Downloads\프론트엔드\part1\02\sub\shop.html 상대 경로와 절대 경로의 차이 상대 경로 나 자신과 폴더들을 다른 컴퓨터로 옮겨도 나 자신이 경로의 기준..

[HTML&CSS] HTML & CSS란?

HTML / CSS /JavaScript 각 언어의 역할 HTML 웹사이트에 들어갈 내용을 담당한다. Markup 언어의 한 종류인데, 태그 등을 이용해 문서나 데이터의 구조를 표현하는 언어이다. 제목, 본문, 목록 등과 같은 본문 내용의 작성을 할 수 있으며, 그 밖의 링크나 인용 등으로 구조적 문서를 만들 수 있는 방법을 제공한다. CSS 웹사이트의 스타일을 담당한다. 내용의 정렬이나 색, 폰트, 크기, 자간 등의 스타일을 적용할 수 있다. JavaScript HTML과 CSS가 내용과 스타일을 담당한다면 JS는 인터랙션을 담당한다. 인터랙션이란, 상호작용이라는 의미인데 JS는 상호작용을 통해 웹의 동작을 담당하게 된다. HTML 시작하기 기본 구조 1. 폴더 생성 및 .html 파일 생성 프로젝트를..

[CSS&JS] 오픈 소스

오픈 소스 어떤 소프트웨어 프로그램을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근하여 열람할 수 있도록 공개하는 것으로, 보통 소스가 공개된 소프트웨어를 오픈 소스 소프트웨어라고 한다. 소프트웨어 말고도 개발 과정이나 설계도가 공개되는 경우, 하드웨어에도 오픈 소스 모델이 적용될 수 있으며, 글꼴고 ㅏ같은 데이터에도 오픈 소스 개발 모델이 적용되는 경우가 있다. 꼭 무료만 있는 것이 아닌 유료도 있으며, 2차 창작을 허용하는 경우가 있고, 상업적 용도로까지 사용 가능한 경우도 있다. 공개만 하고 2차 창작이 불가능한 경우도 있는데, 이 경우는 오픈 소스라고 부르지 않는다. 기술 면접에서서는 오픈 소스에 대하여 오픈 소스를 사용하는 것에 거부감이 없는지, 어떠한 오픈 소스를 사용해 보았는지에 ..

[CSS] margin & padding / position

margin / padding margin 바깥쪽 여백을 조정하는 속성 margin: top/bottom left/right; margin: 30px 10px; /**margin을 상하 30px, 좌우 10px*/ margin: top right bottom left; margin: 30px 20px 10px 5px; /**margin을 상 30px, 우 20px, 하 10px, 좌 5px*/ margin: top left/right bottom; margin: 30px 20px 10px; /**margin을 상 30px, 좌우 20px, 하 10px*/ padding 안쪽 여백을 조정하는 속성 padding: top/bottom left/right; padding: 30px 10px; /**paddin..