Front-End64 [HTML] Chapter 09. 웹 어플리케이션과 정보를 제출할 땐 form 웹 어플리케이션 웹 페이지라 하는 것은 html, css를 통해서 정적인 콘텐츠를 웹 페이지에 방문하는 사용자들에게 단순히 보여주기만 한다. 그런데 우리가 사용하는 웹 어플리케이션이라고 하는 것은 정적이 아닌 동적인 콘텐츠로서 글에 댓글을 쓴다거나 좋아요를 누르는 등, 사용자와 소통할 수 있는 방법이 있다. 그런 의미에서 우리가 단순하게 콘텐츠를 보여주게 되는 것은 우리의 웹 페이지가 웹 사이트로 분류되고, 우리의 웹 페이지에서 사용자와 소통할 수 있게 되면 그 때부터 웹 어플리케이션이라고 부를 수 있는 것이다. 그래서 필요 시 javascript를 배우는 것이다. 프로그래밍을 배울 때, Front-End 영역이 진입장벽이 낮다, 쉽다 라는 말을 한 번 쯤은 들어본 적이 있을 것이다. 나는 그런말이 나오.. 2023. 1. 4. [HTML] Chapter 08. head 태그를 구성하는 요소들 1. css 파일들 2. style 3. title 타이틀 4. meta 어떤 방식으로 렌더링되는지 설정 웹 사이트에 대한 일방적인 설명 웹 사이트에서 담고있는 내용이 어떤 keyword에 대한 설명 누가 만들었는지 기기 별로 비율이 다른데, 비율을 맞추는 용도 사용자 눈에 보이지는 않지만, html 파일에 대한 부가적인 설명을 담고있다. 배포된 html 파일 url을 다른 곳에 첨부했을 때, 나오는 내용들을 정의해줄 수 있고, 검색 솔루션(구글, 네이버 등)에서 어떤 웹사이트인가 판단할 수 있게 도와주는 SEO(검색 최적화)에 도움을 주는 태그이다. 5. favicon ico 2023. 1. 4. [CSS] Chapter 11. 레이아웃 만들기 - grid 3. grid .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } grid로 정렬하는 방법은 제일 최신에 나온 방법이다. grid 같은 경우는 공간을 이미 다 격자로 나누어놓은 다음에 그 격자에 해당하는 것만큼 채워주는 방식으.. 2022. 12. 29. [CSS] Chapter 10. 레이아웃 만들기 - float 2. float 정렬 .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } float 속성이 있는데 이것은 레이아웃 배치를 위해서 만들어진 속성이다. html의 모든 태그들은 float이 디폴트로 none으로 부여되어 있다. 정.. 2022. 12. 29. [CSS] Chapter 09. 레이아웃 만들기 - display_inline 2번째 파랑색 div 블럭과 3번째 초록색 div 블럭을 어떻게 한 라인에 배치를 할 수 있을까? 크게 4가지 방법을 통해 알아보겠다. 1. 많이 사용하지 않은 귀찮은 방법 .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } .. 2022. 12. 29. [CSS] Chapter 08. CSS 레이아웃 부모태그의 css는 자식도 영향을 받는다 - inherit Loerm // 빨간색 글씨로 나온다. 버튼 // 태그마다 상속이 안되는 경우도 있어서, 버튼 태그는 직접 설정해야한다. .parent { width: 200px; height: 200px; border: 1px solid red; } .child { width: 70%; height: 70%; background-color: blue; } // 두 class가 div 태그라고 가정했을 때, child 태그는 parent 태그의 크기 70%에 해당하는 크기를 가진다. px, em, rem 일반적으로 16px = 1em = 1rem이다 .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-si.. 2022. 12. 26. [HTML] Chapter 07. 레이아웃 나누기 웹 페이지를 만들 때, 중요한 사실은 일단 div 태그로 공간 나누기를 해야한다. 하나의 웹 페이지에서는 다양한 구역이 있고, 기능이 있다. 그것이 디자인의 경계가 되었건 혹은 기능적인 경계가 되었건 html 상에서 구역이 나눠질 필요가 있다면 일단 div 태그로 나누고 봐야한다. 물론 무의미한 div 태그 사용은 권장되는 코딩의 방식은 아니지만, 그럼에도 불구하고 이유가 있다. 유지보수가 편해진다. 고쳐야하는 컨텐츠가 어떤 div 태그에 있는지 파악을 할 수 있다면 나중에 수정이 필요할 때, 금방 찾을 수 있다. 협업이 쉬워진다. 단순 태그보다도 태그로 감싼 태그가 직관성이나 의도를 알기가 쉬울 것이다. 단 div 태그에 class, id를 부여하게 될텐데, 이 네이밍들은 누가보더라도 이해할 수 있게끔.. 2022. 12. 26. [HTML] Chapter 06. 논 시멘틱 - 공간을 나누는 div, span 태그 시멘틱 마크업을 할 때든, 우리가 주로 많이 쓰는 태그는 와 태그일 것이다. 1. Div : Division / 가상의 경계, 가상의 레이아웃 2. Span 태그는 공통적인 영역에 대해 레이아웃을 나누는 데 있어 css에 중요한 태그이다. 특징은 태그처럼 display: block 이라는 속성을 가지고 있으며 자동으로 줄바꿈이 된다. 줄바꿈, display 영역이 설정되지 않고, 단순히 영역을 감싸주기만 하는 태그가 태그이다. 다시 한 번 복기하지만, non-semantic 태그를 사용하기 전에, "과연 이게 non-semantic 태그 밖에 사용할 수 없는 것일까?" 라고 고민해봐야 한다 2022. 12. 26. [HTML] Chapter 05. 시멘틱 마크업 HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 태그로만 마크업된 웹사이트를 많이 접하곤 한다. 하지만 이렇게 오로지 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러가지 측면에서 문제가 있을 수 있다. 시멘틱 마크업이란? 태그는 보통 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 된다. 그래서 웹사이트에서 다음과 같은 태그가 사용되는 것을 어렵지 않게 접할 수 있다. ... ... ... 사실 HTML5에서 이러한 화면 레이아웃을 위해서 헤더 영역 태그로 마크업된 헤더 영역은 일반적으로 웹사이트의 로고와 소개글 그리고 메인 메뉴가 위치하게 된다. 태그는 최상위 제목을 마크업하기 위해서 쓰이는데, 일반적인 웹페이지에서는 대부분 하.. 2022. 12. 26. [CSS] Chapter 07. 시멘틱 태그와 스타일링 시멘틱에 관한 설명글 : https://song-ift.tistory.com/8 https://song-ift.tistory.com/50 하나를 에로 들면 : 단순히 글자만 굵게 : 문서에서 중요한 단어 두 태그는 보이기에 렌더링상으로 똑같이 보인다. 시멘틱 태그는 적절한 상황에 의미를 부여해서 쓰는것이지, 단순 웹의 스타일링을 위해 사용하면 안된다. 검색포털에서 html을 읽는데 도움이 될 수 있고, 스크린리더에 탐색할 때 용이하다. 시멘틱 태그는 종류도 많거니와 외울 수 없다 자주 사용하는 시멘틱 태그 : 위 첨자 : 아래 첨자 : 약자 2022. 12. 26. 이전 1 2 3 4 5 6 7 다음
