본문 바로가기

BoostCourse29

3-2) 상속과 우선순위 결정-2 만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나오겠죠. 즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다. CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다. text.... #a{ color : red; } .b{ color : blue; } div{ color : green; } 위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다. id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선됩니다. 위 코드에서는 id인 a의 색상이 적용되게 됩니다. CSS의 이런 성질을 캐스캐이딩이라고 합니다... 2020. 12. 27.
3-2) 상속과 우선순위 결정-1 상위에서 적용한 스타일은 하위에도 반영됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다. 하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다. 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다. 이런 것은 원하는 것이 아니죠. 그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다. 이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다. 아직 혼란스러운 부분이 있다면, 여러분들이 중첩된 엘리먼트를 만들고, CSS 속성을 부여하면서 이 특징을 잘 이해해보면.. 2020. 12. 27.
3-1) CSS 선언방법 CSS의 구성 span { color : red; } span : selector(선택자) color : property red : value style을 HTML페이지에 적용하는 3가지 방법 1. inline HTML태그 안에다가 적용합니다. 다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다. 2. internal style 태그로 지정합니다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다. ... 3. external 외부파일(.css)로 지정하는 방식입니다. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다. 현업에서는 여러개의 CSS 파.. 2020. 12. 27.
2-4) class 와 id 속성 ID 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다. 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다. Class 하나의 HTML문서 안에 중복해서 사용 가능합니다. 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다. 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다. 이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다. 예를 들어 ID사용을 금하는 곳도 있습니다. class로만 사용하는 곳도 있습니다. 그건 팀이 결정하기 나름입니다. 하지만 반대의 경우 즉 모든 것을 id만으로 사용하는 것은 없겠죠?.. 2020. 12. 27.
2-3) HTML 구조설계 HTML 구조설계 구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다. 현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다. 즉 어떠한 화면을 보면서 그대로 구현하는 것이죠. 그 화면을 보면서 구조를 분석해야 합니다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다. 각 영역 안의 내용 역시 여러 가지 형태일 겁니다. 목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다. 이때마다 적절한 태그를 쓰면 됩니다. 그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가는 겁니다. 이때 CSS코.. 2020. 12. 27.
2-2) HTML Layout 태그 레이아웃을 위한 태그 레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용됩니다. header section nav footer aside html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다. 지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성됩니다. 생각해보기 간단한 웹페이지를 만든다고 가정하고, 상단 영역, 네비게이션 영역, 하단 영역을 layout tag를 사용해서 구성해보면 좋습니다. header home news sports 로그아웃 오늘의 날씨 footer 2. 여러 웹사이트들이 어떻게 layout태그를 사용하고 있는지 살펴보세요. 모바일에서는 레이아웃 태그 사용 PC에서는 레이아웃 태그가 적용되지 않을 수.. 2020. 12. 27.
2-1) HTML Tags HTML tag의 종류 태그는 그 의미에 맞춰서 사용해야 합니다. 링크 이미지 목록 제목 anchor 태그, img 태그, ul/li 태그, heading 태그, p 태그 등이 자주 사용됩니다. 그 밖에 가장 많이 사용하는 div태그가 있습니다. div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용합니다. 많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요합니다. 출처 Boostcourse - 2-1) HTML Tags 웹 프로그래밍(풀스택) 부스트코스 무료 강의 www.boostcourse.org 2020. 12. 25.
7) WAS 클라이언트/서버 구조 클라이언트(Client)는 서비스(Service)를 제공하는 서버(Server)에게 정보를 요청하여 응답 받은 결과를 사용합니다. DBMS (DataBase Management System) 다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어입니다. 미들웨어 (MiddleWare) 클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 있습니다. 비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 합니다. WAS (Web Application Server) WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이.. 2020. 12. 25.
6) 웹서버 웹 서버란? 웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말합니다. 웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것입니다. 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있습니다. 웹 크롤러란? 네이버나 구글 같은 검색 사이트에서 다른 웹사이트 정보를 읽어갈 때 사용하는 소프트웨어 웹 크롤러는 사용자가 검색하기 전에 수 천억 개에 달하는 웹페이지에서 정보를 모아 이를 검색 색인에 정리 프로토콜이란? 클라이언트와 서버가 미리 정해놓은 규칙 렌더링이란? 웹 서버가 여러 정보들을 하나로 합쳐서 보여주는 작업 웹 .. 2020. 12. 25.
5) browser에서의 웹 개발-2 웹에서 코드 실행해볼 수 있는 페이지 HTML 문서 안에 HTML태그뿐 아니라 CSS, JavaScript코드가 존재합니다. JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아도 좋고, css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋습니다. javascript파일을 하단에 위치시키는 것이 일반적이지만, 참고로 다른 방법도 있습니다. defer / async 속성을 사용해서 선언한 곳과 스크립트 실행 시점을 분리할 수 있습니다. 아래 내용을 참고하세요. (IE9까지는 지원되지는 않는속성) https://developer.mozilla.org/ko/docs/Web/HTML/Element/script 출처 Boost.. 2020. 12. 25.
5) browser에서의 웹 개발-1 알게 된 몇 가지 특징 HTML문서는 html이라는 태그로 시작해서 html태그로 끝납니다. head는 무엇을 하는 걸까요? : 어떤 자세한 문서에 대한 정보들이 포함되어있다. body는 무엇을 하는 걸까요? : 화면에 표현되어야 할 태그들이 포함되어있다. HTML은 계층적입니다. HTML은 tag를 사용해서 표현합니다. HTML 문서 안에 HTML태그뿐 아니라 CSS, JavaScript코드가 존재합니다. JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아도 좋고, css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋습니다. 출처 Boostcourse - 5) browser에서의 웹 개발-1 웹 프로그래밍(풀스택).. 2020. 12. 23.
4) browser의 동작-2 파싱과정이 일종의 컴파일 과정이라고 표현했으나, 컴파일은 CPU가 알아들을 수 있는 machine code 또는 VM이 알아들을 수 있는 byte code 코드로 변환하는 단계를 말합니다. 따라서 파싱작업이 컴파일 작업이라고 하는 것은 잘못된 표현입니다. 출처 Boostcourse - 제목4) browser의 동작-2 웹 프로그래밍(풀스택) 부스트코스 무료 강의 www.boostcourse.org 2020. 12. 23.
반응형

티스토리툴바