웹 상식
도메인
- Ip주소를 쉽게 문자화한것.
- 호스팅 업체를 통해서 일정금액을 지불하고 사용해야함
디렉터리
- 컴퓨터상의 폴더/파일구조
EX) C:\Program Files\Adobe\Adobe Photoshop CC 2019/Photoshop.exe
URL(Uniform Resource Locator)
- 네트워크 상의 자원이 어디에 있는지 알려주기 위한 규약. 파일식별자라고도 함
EX) https://image7.coupangcdn.com/image/coupang/common/logo_coupang_w350.png
로컬(Local)/리모트(Remote)
- 로컬은 클라이언트단을 나타냄
- 리모트는 서버단을 나타냄
웹 서버
- 클라이언트의 웹 브라우저를 통해 HTTP요청을 받아들이고 HTML문서와 같은 웹 페이지를 저장/반환 하는 서버 프로그램 및 서버 컴퓨터
웹 호스팅
- 홈페이지를 운영하기위해 웹(WWW)의 공간을 임대하는것.
- 호스팅을 하지 않으면 로컬단만 존재함.
- 호스팅을 하면 본인 외에 모든 사람들이 웹 브라우저의 주소창에 URL을 입력하면 접속가능함.
웹 브라우저
- 인터넷망에서 정보(파일)를 검색하기위한 프로그램
- 크롬(구글), IE(마이크로소프트), 사파리(애플), 파이어폭스(모질라), 오페라 등등이 있음
캐시
- 임시 저장소 개념(최대로 쌓이면 지워줘야함)
- 자주 접근하는 웹페이지의 내용을 브라우저에서 기억, 웹에 빠른 접근가능
- 캐시가 full로 쌓이면 서버에서 저장된 내용을 불러오지못한다. -> 캐시삭제 필수 ctrl+F5
웹 에디터
- HTML/CSS/Javascript등의 언어의 문법을 이해하고 그것의 결과물을 랜더링하여 보여 줄 수 있는 프로그램
- Vscode, 브라켓, 드림위버, 에디트플러스, 아톰 등등 다양한 웹에디터가 존재함.
FTP(File Transfer Protocol)
- 웹서버에 올라간 파일들을 관리하는 프로그램
- 웹퍼블리셔는 기본적으로 본인의 회사서버의 FTP에 접속하거나 웹 에디터의 FTP기능을 이용하여 파일을 수정하는 방식으로 홈페이지를 관리한다.
SEO(Search Engine Optimization)
- 검색노출최적화
- meta, h, strong태그 등 키워드 노출과 관련된 태그를 활용하여 포털의 검색노출을 유도한다.
HTML(HyperText Markup Language) 5.0
- 웹 페이지의 구조를 전반하는 마크업 언어.
- “태그”로 되어있는 HTML요소 형태로 작성한다. 태그는 일반적으로 쌍으로 이루어짐
- 한줄씩 즉각적으로 리뷰가 가능한 인터프리터 언어 (<->컴파일러)
- box, text, image,video, link, list(box)
- Block, inline 요소
- CSS를 모두 제거하면 Block속성의 특징에 따라 column방향에 따라 일렬로 정렬됨
HTML5 - 시멘틱 태그
Html5의 웹페이지에 사용되는태그. 시멘틱태그(의미론적인)란 어느 부분이
어떤 기능, 내용을 담고있을지 컴퓨터가 예측 가능하게 작성하는 태그.
각 태그마다의 역할을 잘 알고 사용하는것이 중요함
CSS(Cascading) 3.0
- ‘선택자’를 이용하여 특정 HTML 요소의 속성을 부여
- HTML이 뼈대라고 치면 CSS는 옷을 입히는것과 같음
CSS의 3가지 작성방법
1. Inline Style Sheet : 각 태그의 style 속성에 작성
<!--html-->
<body>
<div style="width:100px;">
저는 'div' 태그입니다
</div>
</body>
2. Internar Style Sheet : style태그를 사용하여 body안에 한꺼번에 작성
<!--html-->
<body>
<div>
저는 'div' 태그입니다
</div>
<style>
div{width:100px;}
</style>
</body>
3. Linking Style Sheet : 외부 css파일을 해당 html파일과 연결시켜 사용 -> 실무 사용
<!--html-->
<head>
<link rel="stylesheet" href="css파일의 경로">
</head>
......
<body>
<div>
저는 'div' 태그입니다
</div>
</body>선택자(Selector)란?
- class선택자 : 어떤 분류 안에 포함된 요소의 특성을 정의하는데 사용됨. 중복 사용가능.
ex) .className{color : red; padding : 5px;}
- id선택자 : 어떤 요소에 대해 유일한 특성을 정의함. HTML문서 내에 단 한번만 사용가능.
ex) #idName{color : red; padding : 5px;}
- 태그선택자 : 해당 태그 전체의 특성을 정의하는데 사용. 주로 css초기화에 사용된다.
ex) TagName{color : red; padding : 5px;}
Block요소, inline요소, inline-block요소
block요소
- block은 한 영역을 차지 하는 박스형태을 가지는 성질.
- 기본적으로 block은 width값이 100%가 된다.
- 부모 기준 100%를 채우기 때문에 라인이 새로 추가되어 세로 방향으로 나열된다.
- width / height / margin / padding 모두 적용가능.
inline요소
- inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다.
- 기본적으로 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않음. 가로 방향으로 나열된다.
- 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.)
- width / height 적용불가능
- margin : 좌,우만 적용가능
- padding : 좌,우 적용가능 / 상,하는 공간을 차지하지 않는 여백
inline-block요소
- block과 inline의 특징을 모두 가지는 요소
- 줄바꿈이 이뤄지지 않음. (inline특징)
- width / height 적용가능. (block특징)
- width/height를 지정하지 않을 경우, 컨텐츠만큼의 영역이 잡힌다 (inline특징)
절대경로/상대경로
절대경로
- 어떤 웹 페이지나 파일이 가지고 있는 서버상의 고유한 경로
- 절대경로를 알고있으면 바로 그곳으로 이동하거나 해당 파일을 갖다 쓸 수 있다.
ex)
https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png
C:\users\document\untitled.jpg
상대경로
- A라는 파일을 기준으로 B라는 파일을 찾아가는 상대적인 경로.
- 주로 메인 HTML파일을 기준으로 CSS/JS/Image파일 등을 상대경로를 통해서 찾아내어 연결한다.
ex)
아래 디렉터리에서 index.html을 기준으로 style.css를 찾을 때 상대경로는 css/style.css 이다.
반대로 style.css를 기준으로 index.html를 찾을 때는 ../index.html이다
../ : 해당 폴더에서 상위 폴더로 이동한다는뜻
웹 에디터 사용법 및 CSS연결방법
- <link rel=“stylesheet” href=“절대/상대경로”> 태그를 head사이에 삽입하여 html파일에 css파일을 연결함.
