본문 바로가기

전체 글

 (64)
[html, css 응용] 4. css 선택자, 결합자 오늘은 선택자와 결합자에 대해 알아보았다. 둘 다 여러 요소를 선택할 때 사용하는 것으로 선택자는 앞에서 id와 #를 이용하는 방법으로 배웠다. 이번에는 class, 결합자 등을 통해 여러 요소에 css 규칙을 적용시키는 방법을 실습해보자. 1. 선택자 실습 : class를 이용하여 4개의 li중에 가운데 2개만 색상을 다르게 해보자. Tueday, January 2nd I'll Finish Section 3 Wednesday, January 3rd I'll Go To Seoul With Gy Girlfriend Thursday, January 4th Dive Deeper into HTML & CSS And Build More Complex WebSites Friday, January 5th Practi..
[html, css 응용] 3. css 박스 모델 html 요소는 모두 박스모양으로 이루어져 있다. 개발자 도구 (F12)를 통해 들어가보면 다음과 같이 그림 형태로 나타난다. margin : 공간에 대한 의미로 content의 바깥 공간에 대한 정의이다. padding : content의 내부 공간으로 실제 몸집이 커진다. border : content의 테두리이다. # padding과 margin 옵션을 1개 주면 4방향 모두 해당 px로 지정되고 옵션을 2개 주면 아래-위, 양옆 세트로 지정되고 옵션을 4개주면 위쪽부터 시계방향으로 px조정이 가능하다.
[html, css 응용] 2. css의 inheritance, cascading, specificity 1. inheritance ( 상속 ) 상속이랑 상위 요소의 속성이 자식 요소에 반영되는 것을 의미한다. 자바의 상속과 같은 맥락이다. 개발자 도구 F12를 눌러 html코드를 확인해 보자. 작성한 코드중 가장 하위 요소인 를 살펴보면 상속 위치라고 표시 된 요소가 body, ol 두개이다. body를 보니 실선과 투명색인 것으로 보아 직관적으로 상속이 잘 되지 않는다는 것을 느낄 수 있다. 왜일까? # 개발자도구 - 스타일 부분을 살피면서 text-align이 따로 명시 되어 있음을 알 수 있었다. # 코드를 슥 보면 부모요소와 맞춤인 것을 파악할 수 있다. ( 이게 상속보다 힘이 쎈가? 에 대해 의문했다면 천재 ) # 의 속성을 통해 자식 의 속성을 같이 정의할 때 편리한 요소이구나. 이래서 목록화하..
[html, css 응용] 1. 리스트 이해하기 응용으로 넘어가기 앞서 VIEW - EXTENSION 에서 Live Server을 설치하자. 장점 vscode에서 코드를 수정한 뒤 저장하면 변경 내용이 즉시 업데이트 된다. 배포x 로컬에서 실행된다. ( 테스트 용이 ) 리스트란? 우리가 to-do-list 또는 버킷리스트 등을 적을 때 그냥 A4 용지에 적으면 맛이 안난다. 그래서 우리는 몇가지 종류의 list를 사용하는데 크게 1. 2. 3. 과 같이 순서로 구분되는 것과 ● 로 구분되는 것이 있다. html 요소로는 각각 ol, ul 태그를 통해 사용할 수 있다. ol은 ordered list 로 순서가 존재하여 1. 2. 3. etc... 으로 표현되고 ul은 unordered list 로 순서 x 인 리스트이다. ul은 왜 필요할까? 과일과 같..
[html, css 기초] 16. 공유 css 및 파일관리 웹페이지를 만들 때 html파일을 여러개 만들어야 하는 경우가 있다. 이때 css 파일도 많이 만들게 되는데 그럼 css 코드도 페이지 마다 겹치는 부분이 많다. 이때 공유 css ( 겹치는 코드 공유해놓은 css )파일을 만들어서 관리하면 관리하기 훨씬 용이하다. ( 실습 생략 ) 알아둘 점 # 공유 css 파일을 다른 css파일 보다 먼저 link로 연결해야한다. ( 코드상으로 맨 위 ) 왜냐면 여러 css를 참조하는 경우 파일의 순서가 영향을 미치기 때문이다. # 두번째 css 파일 부터 차례대로 상충하는 부분은 덮어씌기가 된다. # styles 파일을 만들어 css 파일을 모아두고 images 파일을 만들어 images 파일을 별도로 관리하자! # 하지만 중간에 교체할 경우 경로를 모두 수정해야 ..
[html, css 기초] 15. 이미지 추가 및 스타일링 이번 강의에서는 이미지 추가 및 스타일링은 진행 해보자. step 1. 이미지 파일을 원하는거 다운로드 받아 vocode에 업로드한다. ( drag and drop ) step 2. body에 img 태그를 이용하여 이미지를 추가한다. Max 'Challenge for Wednesday, january 17th Learn about the basic of web development - specifically dive into HTML &CSS. I'll achieve this goal by diving into more learning resorces. S # img의 속성은 hret가 아닌 src에 경로를 입력하여 외부 이미지를 받아온다. # alt는 이미지가 표시되지 않을 때 표시되는 텍스트로 pr..
[html, css 기초] 14. pre 태그 pre태그는 html에 입력한 내용 그대로 보여주는 태그이다. 사용하는 경우는 ""는 html에서 태그를 표현할 때 사용하므로 이를 표현할 때 또는 공백, 줄바꿈 등도 html에서 무시되므로 이를 표현하고자 할 때 사용한다. 소스코드 Max 'Challenge for Wednesday, january 17th Learn about the basic of web development - specifically dive into HTML &CSS. I'll achieve this goal by diving into more learning resorces. 실행결과 참고로 를 다른 태그에서 사용하고 싶을 때 "&lt"와 "&gt"로 사용할 수 있다.
[html, css 기초] 13. 외부 폰트 사용법 이번 강의는 구글 폰트 ( https://fonts.google.com/ )에 있는 폰트를 css에서 사용하는 방법을 배워보자. step 1. 사이트에 접속한다. step 2. 원하는 폰트를 추가한다. select + 부분을 클릭하면 된다. step 3. 오른쪽

티스토리툴바