HTML
-
Box model, 상자이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 25. 05:15
이번시간에는 BOX모델에 대해 알아보도록 하겠습니다. CSS를 배울 때 이해해야 되는 것 중 하나가 많은 element들이 box, 상자형태라는 점과, 그 요소가 4개 라는 것입니다. 1> 첫 번째는 contents, 컨텐츠, 내용, 2> 두 번째는 박스의 경계, border, 보더, 3> 세 번째는 padding, 패딩, 박스의 보더, border에서 안쪽으로 있는 간격, 4> 그리고 마지막 네번 째는 margin, 마진, 박스의 border, 보더에서 바깥쪽으로 있는 간격 정리하면, contents, 컨텐츠와 border, 경계 안쪽에 있는 간격이 padding이고, 바깥에 있는 간격은 margin입니다. 그럼 이제 HTML문서로 가서, title에는 Box Model이라고 쓰고, incline방법으..
-
CSS와 HTML의 결합이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 24. 03:00
이번시간에는 CSS파일과 HTML파일을 결합시키는 작업을 배워보도록 하겠습니다. 본격적으로 들어가기 전에, 타이틀, 문단, 링크를 가진 HTML파일을 먼저 만들어 보겠습니다. Title Hello, everyone Fake link 아래와 같이 파일의 모습을 크롬에서 확인할 수 있습니다. 그럼 이제 HTML파일을 CSS와 결합해보도록 하겠습니다. HTML파일과 CSS파일을 결합하는 방법은 두가지, 1> incline, 2> external 있습니다. 1> incline방법은 head부분에 style을 열고 닫아 줌으로써, HTML파일 상단에 CSS를 붙여줍니다. 여기서, style내부에 body를 열어서 배경색을 빨간색으로 설정하면 크롬에서 바뀌는 것을 확인할 수 있습니다. 이와 같이, incline으로..
-
CSS syntax, 구성이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 23. 05:35
이번 시간에는 CSS파일을 만든 후, CSS구성에 대해 알아보도록 하겠습니다. 그럼 제일 먼저, 마우스 오른쪽 버튼을 클릭한 후, new file을 클릭 하겠습니다. 파일명은 style.css로 작성 후 생성하면 됩니다. 이때, 확장자를 html이 아닌, css로 쓰고 있다는 점 확인하시기 바랍니다. 파일을 생성했다면, CSS의 구성에 대해 알아보겠습니다. CSS는 크게 두 부분, 1>selector와 2>property 부분으로 구성되어 있습니다. 2> property부분은 selector 내부에 쓰여지는 내용으로, property-name: value;와 같이 생겼습니다. property-name은 소문자로 써야 되고, 공백이 없습니다. 그리고 value뒤에 쌍반점, semicolon, 세미클론, ;..
-
공부계획 #3 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 22. 05:35
지금부터는 CSS에 대해 배워보도록 하겠습니다. 1> 제일 먼저 CSS를 HTML에 어떻게 결합하는 방법에 대해 배우겠습니다. 2> 그 다음, box, 박스 모델을 배워서 element, 내용들을 screen, 화면상에 위치시키는 방법에 대해 공부 하겠습니다. 3> 그런 다음, flex box에 대해 공부해 보겠습니다. 이 레이아웃은 데스크탑과 모바일 화면 사이즈에 맞춰 반응 합니다.4> 그 후, 차례로, animation, transition, media query같은 심화된 내용에 대해 배워보도록 하겠습니다.
-
HTML 문서 작성이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 17. 02:15
이번시간에는 HTML 문서를 만들어 보도록 하겠습니다. 지난 시간에 작성해 본 것은, 틀에도 맞지도 않고, 제대로 된 HTML 문서의 형태가 아니였습니다. 그래서 이번시간에는 Visual Studio Code, VSC에서 제대로 된 HTML 문서를 작성해 보도록 하겠습니다. 제일 먼저, 태그를 작성하여, 문서 시작을 명령해야 됩니다. 위 태그는 구글 크롬에게 지금 만드는 이 문서가 HTML 문서임을 알려줍니다. 그런 다음, 태그로 문서를 열고 닫을 수 있습니다. 위 태그 사이에 있는 내용들이 무엇이든 간에 모두 HTML 문서라는 것을 지칭합니다. 그럼 여기서 잠깐! 은 왜 닫지 않는지에 대해 궁금할 수 있습니다. 태그는 self-contained 태그라고 해서, 태그 자체로 정보를 제공하기 때문에, 혼자..
-
HTML 태크 구조이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 16. 04:50
이번시간에는 HTML 태그에 대해 공부해 보도록 하겠습니다. 저번시간에 말했듯이, HTML은 태그 덩어리이기 때문에, 태그를 먼저 알아야 합니다 HTML 파일을 직접 만들어보면서, 태그를 배워보도록 하겠습니다. 디폴트 값으로 index파일을 제일 먼저 찾도록 웹 서버들은 설계되어 있기 때문에, Visual Studio Code를 열어 index라는 이름으로 파일을 만들어 보겠습니다. KAKAO-CLONE 옆에 있는 아이콘, New File을 클릭하여, index.html이라는 이름으로 파일을 만들어 주면 됩니다. 태그의 구조를 살펴보면 내용 이런식으로 생겼습니다. 예를 들자면, Human, 인간 으로 또는 Dog, 멍멍이로 쓰인다고 이해할 수 있습니다. 이게 웬 새로운 태그냐 하시는 분들도 있으실지 모르..