본문 바로가기

분류 전체보기

 (64)
[html, css 기초] 12. 파일 병합 및 id 파일병합 이전 실습에서 유지보수 및 가시성, 편리함 등을 위해 html 파일과 css파일은 분리해서 관리하도록 분할하였다. 하지만 브라우저에게 html을 전달 해 줄때 css 파일이 병합 되어야 한다. 이 동작은 어떻게 이루어질까? 개발자도구( F12 )에서 network부분을 보자 ( F5로 새로고침 하면 나옴 ) 처음 html이 파일이 브라우저에 의해 자동 요청되고 외부파일 (css, js, 이미지, etc..)은 이후 별도로 요청된다. 즉, 맨 처음 html파일이 로드될 때 link등으로 지정된 파일들을 브라우저가 자동으로 요청하여 병합된다. id란? 이전에 실습한 내용은 여러 html 요소들의 style 과 같은 css 코드들을 포괄적으로 작성한 뒤 css파일을 별도로 분리까지 하였다. 그럼 일부..
[html, css 기초] 11. css 아웃소싱 # 이번 강의에서는 css파일을 별도로 관리하는 방법을 알아보자 # 별도로 관리하는 이유는 웹페이지에 요소를 추가할 때 마다 html코드가 아닌 css코드도 매우 많이 추가되기 때문에 가시성이 떨어질 뿐 만 아니라 관리하기 어렵다. # 참고로 아웃소싱이란 외부에 작업을 맡기는 행위 등을 뜻하는데 이 강의에서는 css파일과 html파일의 분할을 의미하는 것 같다. [예시] Max 'Challenge for Wednesday, january 17th Learn about the basics of web development - specifically dive into HTML & CSS. I'll achieve this goal by diving into more learning resorces. 지금까지 ..
[html, css 기초] 10. 링크 설정 기초 링크에 대한 태그도 메타 정보이므로 style 태그에 중첩시킬 수 있다. a{ color: rgb(167, 1, 87); user-select: none; text-decoration: none; } # 하지만 링크에 마우스를 올려놓아도 아무 이펙트가 없기 때문에 링크임을 표시해주는 css style을 포함해주는 것이 좋다. # 이때 사용하는 것이 a:hover 요소인데 hyperlink over가 아닌가 조심스레 추측해본다... a:hover{ text-decoration: underline; } 코드를 추가한 뒤 실행 결과 링크에 마우스를 올려 놓으면 밑줄이 생기는 것을 볼 수 있다.
[html, css 기초] 9. html 기본 구조 이전 강의에서 css와 html코드를 분리하므로써 불필요한 코드작성을 방지하고 가시성을 높였다. 이번에는 html의 기본 구조에 대해 실습해 보았다. html의 기본 구조 ● html은 크게 head와 body로 이루어져 있다. ● head에는 보통 style과 같은 메타 정보를 포함하는 (눈에 보이지 않고 정보에 대한 정보를 나타내는 ) 코드를 포함한다. ● body에 실질적으로 페이지에 보여지는 코드를 포함한다. ● 을 상단에 작성하여 html의 최신버전인 html5를 사용한다는 것을 브라우저에게 알린다. ● head부분에 title tag를 삽입하는데 이는 탐색기가 크롤링을 수행할 때 웹페이지의 제목이고 브라우저 탭에 쓰여질 텍스트이기도 하다. 소스코드 Max 'Challenge for Wednes..
[html, css 기초] 8. css - style 지금 까지 작성한 코드를 보자. 여기에는 한 가지 불편함이 있다. 바로 html 속성에서 style 부분이 모두 동일함에도 불구하고 생략하지 않고 모두 써준 것 이다. 그렇다면 이것을 생략하는 방법이 있을까? 당연히 있다!!! html 요소( h1, p.... ) 단위의 스타일을 디폴트로 세팅해주는 css코드가 존재한다. 이는 웹 브라우저에 실질적으로 표시되는 것은 아니지만 스타일을 지정해 주므로 meta information( 메타 정보 ) 라고 부른다. 실습 # style을 각각 다음과 같은 형식으로 지정해 준 뒤 # 태그에서 style을 생략한다.
[html, css 기초] 7. 링크 만드는 방법 링크란? 웹페이지를 사용할 때 텍스트 또는 버튼, 이미지를 통해 다른 웹페이지를 open한 경우가 있을 것이다. 이 방법을 링크로 구현할 수 있다. html 태그 a( 앵커 요소 )를 이용하면 텍스트에 링크를 추가할 수 있다. 실습 # 태그를 이용한다. 실행 결과 # 결과를 보니 바뀐게 없다. 왜일까? # 어떤 웹페이지를 open할 것인지 브라우저에게 알려주는 명령이 없기 때문이다. # 이 명령은 html속성인 href( hyperlink refference )을 이용하여 링크를 지정해 주면 된다. 실행 결과 클릭 후
[html, css 기초] 6. 코드 포멧 하는 방법 1. 설정 - keyboard Shortcuts - format document를 입력한다. 2. keybinding 부분에 단축키를 설정한다. 3. view - extensions 에서 prettier을 검색한 뒤 설치한다. 4. 설정 - settings 에 들어가서 format을 검색한 뒤 다운 받은 것으로 변경한다.
[html, css 기초] 5. css 스타일링 지난번 퀴즈 답 css 참고서에 들어가서 color를 검색하니 "color"라는 속성을 발견하였고 클릭하여 보니 글씨의 현재 color값을 설정한다고 해서 이를 "red"로 바꾸었다. https://developer.mozilla.org/ko/docs/Web/CSS/Reference CSS 참고서 - CSS: Cascading Style Sheets | MDN CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. developer.mozilla.org [결과] 1. 이론 색상을 표현하는 방법에 대해 학습하였지만 색상은 매우 다양하고 많기 때문에 일..

티스토리툴바