프론트엔드 로드맵 (35) 썸네일형 리스트형 프론트엔드 로드맵 14 - CSS 레이아웃 만들기 레이아웃은 특정 공간에 여러 구성 요소를 효과적으로 배치하는 것을 말한다. css를 이용하거나 table 요소로 구성이 가능하다. 하지만 스타일 변경 및 보수 과정에서 번거로움이 있어 요즘에는 table을 안 쓰는 추세다. HTML 레이아웃 구성 요소 1. float 가장 많이 쓰이는 방법. float된 레이아웃 하단에는 clear: both로 정리한다. 외에도 display: table, display:inline-block 등으로 레이아웃을 나누는 방법들이 다양하다. 2. position 값으로 이동 부모요소에 position: relative를 주고 자식에 position: absolute를 줘서 위치를 잡아주면 된다. float과 position은 height값이 제대로 먹지 않는 경우가 많다. .. 프론트엔드 로드맵 13 - CSS 기초 닦기 HTML이 페이지 상에 정보를 표현하는 문서라면 CSS (Cascading Style Sheets)는 HTML을 시각적으로 꾸미는 역할을 한다. CSS를 통해, - 정보(HTML)와 디자인(CSS)을 분리할 수 있게 됐다. - 정보를 수정하지 않고 디자인만 변경할 수 있다. - 검색엔진이 HTML를 해석 가능하도록 해서 더 많은 방문자들의 방문을 유도한다. - 시각장애인을 위한 스크린리더가 HTML을 해석할 수 있다. CSS적용 방법에는 세가지가 있는데, 첫째는 인라인 스타일 inline style, 내부 인라인 시트 Internal style sheet, 외부 스타일 External style css. CSS 스타일 적용 우선순위 1. 인라인 스타일 >> 2. 내부/외부 스타일 시트(HTML에서 hea.. 프론트엔드 로드맵 12 - HTML 기본 검색엔진 최적화 (SEO) 검색엔진 (네이버, 구글 등)에서 특정 사이트에 대한 정보 검색이 원할하려면 (검색창 상위노출) 검색엔진최적화 (Search Engine Optimization, SEO)를 맞춰야 한다. 검색 결과 상위에 나오면 방문 트래픽이 늘어나므로 가장 효과적인 인터넷 마케팅 방법 중 하나라고 할 수 있다. 비용을 들이지 않고 콘텐츠를 활용해 이같은 방식이 가능해진다. 1. SEO를 위해선 HTML 시멘틱 구조로 잘 짜는게 가장 기본적이다. 예를 들어 태그를 쓸 때 페이지의 주제를 명확히 설명하는 글이 들어가야한다. 요소 내에 위치해야 한다. 또 사이트 페이지마다 고유의 제목을 갖춰야 한다. 또 앵커 텍스트의 경우, "click here"와 같은 텍스트, 주소 자체를 쓰지 말고 사이트에 대한 정확한 명칭을 부여하는.. 프론트엔드 로드맵 11 - HTML 웹접근성 필요한 이유 웹사이트는 모든 사용자들이 차별없이 접근할 수 있어야 한다. 브라우저 호환성 테스트를 거쳐 접근성을 고려해야한다. 접근성 고려에는 장애인뿐만 아니라 모바일 기기나 네트워크 연결이 느린 사람도 대상으로 포함하고 있다. 접근성을 위해서는 의미론적인 HTML 구조 (시멘틱 구조)로 마크업하는 것이 가장 중요하다. 1. 개발에 용이하다 2. 모바일 사용이 더 편리해진다(시멘틱 구조의 HTML은 용량이 줄어들고, 반응형을 더 쉽게 만들 수 있다) 3. SEO(검색엔진최적화)에 적합하다 이전에 HTML 마크업은 인라인-블록 요소로 구분했지만 HTML5에 와서는 콘텐츠 모델에 의거해 요소를 구분하고 있다. - 메인 콘텐츠 카테고리 1. 메타데이터 Metadata Content : 보통 Head 영역에 들어가는 요소들.. 프론트엔드 로드맵 10 - HTML 컨벤션과 모범사례 코딩 컨벤션이란? 코딩을 하는 프로그래머 사이의 규칙. 특히 여러명이 협업하는 과정에서 이 컨벤션을 통해 코드 스타일을 유지할 수 있다. 이 규칙을 지키면 가독성이 높아져 소스 코드를 처음 접하는 사람들도 빠르고 쉽게 이해할 수 있는데 도움이 된다. 유지보수에 이점이 있다. NHN이 제시한 코딩 컨벤션을 참조한다. 1. 네이밍 규칙 : 이해하기 쉬운 이름으로 작성한다. 2. HTML - 들여쓰기(보통 2칸/4칸 들여쓰기를 통일 시킨다), 빈 줄(빈 줄은 의미있는 객체를 구분하기 위해 사용되므로 남발하지 말자), DTD 및 인코딩 (어떤 버전의 HTML인지 어떤 문자 코드로 인코딩을 선언하는지 구분), 주석 (HTML 코드의 주석은 코드 그룹을 구분하거나 참고해야 할 때 기술) HTML 요소 작성 규칙은 .. 프론트엔드 로드맵 9 HTML 폼 유효성 검사 form 요소는 웹 페이지에서 사용자가 입력한 데이터를 서버로 전송할 수 있다. **action 속성 : 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시. 해당 주소로 전달된 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. **method 속성 : action에 명시된 위치로 데이터를 서버에 전달되는 방식을 결정하는 것. - get : 이 방식은 주소에 데이터를 추가해 전달한다. 따라서 데이터가 주소 입력창에 그대로 나타나 보안성이 취약하고, 데이터 크기 또한 제한적. 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 떨어지는 정보를 보낼 때 주로 사용. -post : 이 방식은 데이터를 별도로 첨부해 전달한다. 보안성 및 활용성이 GET보다 높다.. 프론트엔드 로드맵 8 의미론적(Semantic)인 HTML란 무엇인가? 시맨틱(Semantic)이란? '의미'를 뜻한다. 따라서 시맨틱 구조라 하면, HTML의 요소(Element)가 가진 목적이나 역할에 따라서 의미론적인 구조를 말한다. 예를 들어 태그는 "이 페이지에서 최상위 제목"을 뜻하는 의미로 사용된다. 이것은 제목입니다 동일하게 보이도록 작성할 수도 있다. 이것은 제목입니다. 그러나 이렇게 짠 코드는 의미적 가치(semantic value)가 없으므로 시맨틱 구조에 위배된다. - 의미론적 마크업을 통해 중요 키워드가 검색 엔진에 영향을 줄 수 있다. - 시각 장애가 있는 사용자가 페이지를 탐색할 때 의미론적 마크업의 도움으로 보다 쉽게 읽어낼 수 있다. - 의미를 부여하면 코드 블록을 분류하고 정리하는 데에 훨씬 도움이 된다. - 개발자에게 태그 안에 들어갈 데이.. 프론트엔드 로드맵 7 - HTML이란? HTML은 HyperText Markup Language. HTML 마크업은 HTML 요소(엘리먼트, Elements)와 그들의 속성(Attributes)과 문자 기반 데이터 형태와 문자 참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성 요소로 이루어져 있다. 또 다른 중요한 구성 요소로는 문서 형식 정의(DTD, Document Type Definition)를 명시하는 문서 형식 선언(document type declaration)이다. 차기 HTML 5에서는 DTD를 지정하지 않아도 되고 오직 레이아웃 모드로 지정된다. HTML 문서는 완전한 HTML 요소로 구성되어 있다. HTML 요소의 가장 보편적인 형태는 구성 요소는: "시작 태그"(Start Tag), "종료 태그"(End Tag), 또 태그.. 프론트엔드 로드맵 6 - 호스팅이란? 웹 호스팅 서비스(Web hosting service) 인터넷 호스팅 서비스의 일종으로 개인과 단체가 인터넷을 이용해 웹서비스를 제공하는 것을 뜻한다. 웹 호스트는 인터넷 연결을 제공할뿐 아니라, 일반적으로 데이터 센터에서 클라이언트 이용에 대한 임대 또는 소유하는 서버의 공간을 제공하는 회사를 가리킨다. 호스팅 서비스 범위는 매우 다양하다. 가장 기본적인 것은 웹 페이지와 작은 크기의 파일 호스팅으로, 파일들은 파일 전송 프로토콜(FTP)이나 웹 인터페이스를 거쳐 업로드할 수 있다. 이 파일들은 보통 웹으로 전송된다. 가장 많이 비교되는 호스팅에는 웹호스팅, 서버호스팅, 클라우드 이렇게 있다. 운영하는 서비스나 서버 활용하는 선호도에 따라 호스팅이 달라질 수 있다. 이용자 입장에서 바라본 호스팅 차이점.. 프론트엔드 로드맵 5 - 도메인 네임은 무엇일까? 인터넷을 연결하는 장치들(컴퓨터, 스마트폰 등)이 식별할 수 있는 주소는 IP다. 그러나 사람은 IP를 쉽게 읽지 못하므로 이를 해결하기 위해 ip에 인간이 식별할 수 있는 이름을 붙이는데, 이것이 도메인이다. 도메인은 "." 또는 루트(root) 아래로 역트리 (Inverted tree) 구조로 구성되어 있다. 도메인은 호스트가 얼마나 붙느냐에 따라 1차 2차가 붙는데 example.co.kr을 예로 들면 kr이 1차 / 최상위 도메인(TLD, Top Level Domain), co가 2차 도메인(SLD, Second Level Domain) example이 3차 도메인인데, 보통 3차 도메인은 등록명이라 부른다. 도메인에는 국가도메인(ccTLD, country code Top Level Domain).. 이전 1 2 3 4 다음
