'HTML' 태그의 글 목록 (3 Page)

본문 바로가기

[D+35] 공간분할태그, 시멘틱태그 국비지원 D+35 - 공간분할 태그, 시멘틱 태그 - 공간분할 태크 공간분할 태그는 레이아웃을 구성하기 위해 논리적인 영역을 분할하는 태그로 크게 2가지가 있다. • Block 방식 - 페이지의 공간을 한줄 다 가지고 있는 방식 - div, h1, p, table, form 등 • Inline 방식 - 컨텐츠 영역만큼만 공간을 차지하고 있는 방식 - span, a, input 등 시멘틱 태그 - 시멘틱 태그는 의미가 있는 태그라는 뜻으로 기존에 div나 p와 같은 태그는 어떤 영역인지 알 수 없지만 시멘틱 태그를 사용할 경우 각 태그의 영역이 어떤 영역인지 파악하기 쉽다. - 시멘틱 태그를 사용했을 때의 장점은 검색엔진이 파악하기 좋기 때문에 데이터를 분석하기 쉽다. - 참고로 시멘틱 태그는 추천일뿐 필.. 2022. 11. 10.

[D+34] HTML 개념 및 태그 종류 국비지원 D+34 - HTML 개념 및 태그 종류 - HTML 개념 • 네트워크 프로그래밍 (정보의 송수신) 우리가 HTML을 알기전에 가장 중요한것은 우리가 작성한 코드들이 어떻게 송수신이 되어지는지를 이해하고나서 HTML의 개념에 대해 학습하는 것이 좀 더 수월할 것이다. 네트워크에서는 크게 두가지로 구분지을 수있다. 바로 client와 server이다. 간단하게 말하자면 client는 서비스를 server에게 요청하는 것이고, server는 client에게 요청받은 서비스를 client에게 제공받는 것이다. 우리가 서버에게 요청하는 것은 그렇게 어렵지 않다. 만약 우리가 원하는 정보를 마우스로 클릭하게 되면 주소창에 이러한 내용들이 있는데 이것들은 사실 서버에게 전달할 요청정보이다. 즉, ?뒤에 적.. 2022. 11. 9.

[HTML+CSS] Do it! HTML5+CSS3 웹 표준의 정석 공부 후기 끝나지 않을 것 같은 HTML과 CSS 늪에서 드디어 벗어나게 되었다. 사실 이 책은 최근에 산 책은 아니고 예전에도 공부하려고 샀었는데 중간정도까지 공부하다가 허리 디스크가 터지는 바람에 치료받느라 녀석의 존재를 잊고 있었다. 그래서 이제서야 다시 마음을 잡고 새로운 마음으로 공부를 하기로 결심했다. 내가 이 책을 구입했었던 가장 큰 이유는 나는 내가 스스로 해냈다라는 느낌을 받아야 공부를 하기 때문에 단원이 끝날때마다 연습문제나 단원 마무리 문제가 있는 것을 찾고 있었는데 내가 찾아본 책들 중에서는 이 책이 어느정도 예제들도 있고 혼자 공부하기에 참 좋은 것 같아서 구입하게 되었다. 책에 대해 간단히 후기를 남겨보자면 세세하게 웹을 만들고 결과를 확인하는 것 까지 이미지와 함께 아주 잘 나와있어서 나.. 2020. 8. 24.

[HTML+CSS][CSS3와 애니메이션] 04 - 애니메이션 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 - 변형 [HTML+CSS][다재다능한 CSS3 선택자] 03 - 가상 클래스와 가상 요소 [HTML+CSS][다재다능한 CSS3 선택자] 02.. onelight-stay.tistory.com 트랜지션을 보다 더 부드럽고 쉽게 사용할 수 있는 애니메이션에 대해서 알아보자. CSS와 애니메이션 애니메이션은 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 변하는 애니메이션 효과를 만들어 낸다는 트랜지션과 비슷한 성격을 가지고 있긴 하지만, CSS 애니메이션은 시작해 끝내는 동안 .. 2020. 8. 12.

[HTML+CSS][플렉스 박스 레이아웃] 02 - 플렉스 박스 항목 배치를 위한 속성들 [HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들 [HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 [HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 [HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변.. onelight-stay.tistory.com 플렉스 박스 항목을 배치하기 위한 속성들에 대해서 알아보도록 하자. justify-content 속성 - 주축 기준의 배치 방법 지정 반응형 웹 디자인을 위해 가변 그리드 레이아웃 사용 시 글자 크기도 유동적으로 바뀌는 것이다. align-items 속성, align-self 속성 - 교차축 기준의 배치 방법 지정 교.. 2020. 8. 11.

[HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들 [HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 [HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 [HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아.. onelight-stay.tistory.com 플렉스 박스 레이아웃이 무엇인지 살펴보고 플렉스 박스 레이아웃을 사용하기 위한 기본 속성들에 대해서 알아보도록 하자. 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로 하며 플렉스 박스를 원하는 위치에 배치하는 것이다. 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있기 때문에 화면 크기에 따라 레이아웃의 배치가.. 2020. 8. 10.

이전 1 2 3 4 5 6 ··· 13 다음

티스토리툴바