HTML-CSS5 [HTML-CSS] CSS, 적용방식, 선택자, 결합자, 가상클래스 얄코님의 '제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고 있습니다. 지난 강의까지는 HTML에 대해서 알아보았습니다. 이번 시간엔 CSS에 대해 정리를 시작해보겠습니다. CSS를 적용하는 방식 CSS를 적용하는 방식이 세가지 있다고 해요. inline style : 태그 안에 style이라는 속성을 이용해서 적용, 그러나 HTML과 분리되지 않기때문에 특별한 경우가 아니면 사용 안 함. internal style sheet : head 태그 안에 style태그를 넣어서 적용, 그러나 코드가 길어지면 스크롤도 많이 해야하고 코드가 두배로 늘어남. linking style sheet : 외부의 CSS파일을 HTML문서에 연결해 적용.가장 널리 사용되는 방식 CSS.. 2022. 8. 28. [HTML-CSS] Attribute, 인용문/목록/이미지 넣기/표/ 다른 링크 연결 태그 얄코님의 '제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고 있습니다. 지난 강의에선 Tag에 대해서 알아보았습니다. 이번 시간엔 태그들과 함께 사용되는 Attribute에 대해 정리해보겠습니다. Attribute란? 태그의 동작을 설정 및 제어함 인용문 관련 태그 : 안쪽의 텍스트가 긴 인용문 (들여쓰기한 것으로 보여짐) cite 속성 : 해당 인용문의 출처 URL : 짧은 인라인 인용문(따옴표가 보여짐) cite 속성 : 해당 인용문의 출처 URL : 강조하는 부분 표시, 검색한 키워드 강조표시(형관펜으로 보여짐) 강의 예제) : 준말/머릿글자 표시 title 속성 : 원래 이름 표시 강의 예제) 목록을 표현하는 태그 : (unordered list) : ul.. 2022. 8. 28. [HTML-CSS] 태그(Tag), Emmet, mnd, 스타일 요소의 분리 얄코님의 '제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고 있습니다. 지난 강의에선 각 언어들의 용도와 차이점에 대해서 알아보았습니다. VS Code -> 파일 -> 폴더 열기 TIL폴더 안에 HTML CSS를 공부하는 폴더를 만들고 열어주었습니다. 새파일을 만들어줍니다. 여기서 index.html 명은 특정 폴더의 디폴트 페이지 이름이라고 생각하시면 됩니다. 이제 이렇게 느낌표를 치게 되면 자동으로 아래와 같은 코드가 입력이 됩니다. Emmet 명령어라고 하네요. 웹페이지에 보여지는 부분은 이 body 태그 안에 입력된다고 합니다. 그리고 lang 속성을 ko로 변경해주어야 하는데요. 문서의 언어를 명시해주는 것이라고 합니다. 접근성, 검색최적화, 폰트를 설정.. 2022. 8. 27. [HTML-CSS] HTML, CSS, JavaScrip란? 얄코님의 '제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고 있습니다. 지난 강의에서 환경세팅을 마쳤구요. 이번시간엔 Html, CSS, JavaScript에 대해 알아 보았습니다. Html의 용도 : 웹페이지 공간에 컴포넌트들을 배치 CSS : 컴포넌트들의 디자인(색, 폰트, 글자크기, 배치) 적용. JavaScript : 특정 요소들에게 기능 부여. 따라서 갖다놓는 역할의 HTML코드와 꾸며주는 CSS코드, 마지막으로 기능을 넣어주는 JavaScript코드 이렇게 세가지 파일로 온전한 제 홈페이지를 만들 수 있을 것 같습니다. 웹 디자이너가 만든 결과물을 HTML, CSS 문서로 코딩하는 사람들 -> 웹 퍼블리셔 여기서 JavaScript까지 배운다면 웹 개발.. 2022. 8. 27. [HTML-CSS] HTML- CSS 공부 시작 전 환경세팅 HTML과 CSS를 알긴 알지만 숙련도가 거의 0에 수렴하는 상태... 이번 기회에 공부를 해보고자 얄코님의 '제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고자 합니다. 절반 분량(약 5시간)인 기본개념은 무료라고 해요! https://www.youtube.com/watch?v=TrC2x4N0XqY 익스플로러 설치 (Chrome으로 진행) 일단 개발 환경부터 세팅해야겠죠? 세팅하기전에 익스플로러는 피해달라고 합니다. 이미 크롬과 Safari만 쓰고 있었기에 상관없었지만요. 현재 최신기술이 적용되고 있는 웹표준을 따르지 않는 익스플로러는 사용하지 않는 게 좋다고 합니다. 웹에서의 적폐라고 하시더라구요 ㅋㅋㅋㅋ. 코드 에디터 설치 (VS Code) 다음은 아래 링크.. 2022. 8. 27. 이전 1 다음 728x90
