w3.css 확장되는 그리드 CSS와 JavaScript를 사용하여 확장되는 그리드를 만드는 방법을 알아보자. 상자를 클릭하면 “확장”(100% 너비)된다. 박스 1 박스 2 박스 3 × Box 1 Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad × Box 2 Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad × Box 3 Lorem ipsum dolor sit…

HTML Entity 변환은 웹 개발에서 매우 중요한 개념이다. 많은 사람들이 웹 페이지에 특수 문자를 사용할 때 어려움을 겪고 있다. 이 글에서는 HTML Entity 변환의 필요성과 방법에 대해 설명해보자. HTML Entity? HTML 엔티티는 HTML 문서에서 특수 문자를 표현하기 위한 코드다. 웹페이지에서 사용하는 일부 문자는 브라우저에서 특정 의미를 가지므로 이를 직접 사용하면 오류가 발생할 수 있다. 예를 들어, 앰퍼샌드(&)는 HTML에서 “그리고”라는 의미로 사용되기 때문에 이를 그대로 사용하면 브라우저가 이를 해석하는 데 혼란을 줄 수 있다. 따라서 HTML 엔티티를 사용하여 이러한 문자를 코드…

w3.css 4열 레이아웃 CSS를 사용하여 4열 그리드 레이아웃을 만드는 방법을 알아보자. 보통 카테고리 / 아카이브 / 갤러리 페이지에서 많이 사용되는 레이아웃이다. 1열 텍스트 입력.. 2열 텍스트 입력.. 3열 텍스트 입력.. 4열 텍스트 입력.. 4열 레이아웃을 만드는 방법 1단계) HTML 추가 2단계) CSS 추가 이 예에서는 4개의 열로 구성된 레이아웃을 생성한다.   이 예에서는 반응형 4열 레이아웃을 만들어 보자.

w3.css 3열 레이아웃 CSS를 사용하여 3열 그리드 레이아웃을 만드는 방법을 알아보자. 일반적으로 헤더와 푸터 사이에 3열 그리드 레이아웃을 가장 많이 사용한다. 3열 그리드 레이아웃이 어떻게 생긴 것인지 어떻게 만드는지 알아보자. 1열 텍스트 입력.. 2열 텍스트 입력.. 3열 텍스트 입력.. 3열 레이아웃을 만드는 방법 1단계) HTML 추가 세 개의 동일한 열 세 개의 다른 열 반응형 3열 레이아웃

테이블을 만들다보면 반응형으로 만든다고 해도 모바일에서 보기는 좀 불편하더라…. 그래서 반응형 테이블 + 모바일 친화적인 테이블을 만들고자 찾아봤고 방법을 찾았다. CSS로만 구현을 하면 제대로 동작하지 않는 경우가 있다고 해서 jquery를 추가한 구현 방법을 찾았다. 반응형 테이블 반응형 테이블을 만드는 방법 반응형 테이블을 어떻게 만들 수 있을지 방법을 알아보자. HTML 사용된 코드 설명 <table class=”responsive-table”> : 테이블을 만들고 클래스를 responsive-table로 지정한다. <th>과일명</th><th>색상</th><th>맛</th> : th는 모바일로 보면 가려지고 값만 라벨로 들어간다. CSS 사용된 코드 설명 @media screen and (max-width: 767px) { ……

w3.css 2열 레이아웃 CSS를 사용하여 2열 그리드 레이아웃을 만드는 방법을 알아보자. 요즘 위젯 같은 것들이 많이 사용되지 않는 개인 블로그나 온라인 이력서 같은 곳에 2열 그리드 레이아웃이 많이 사용 되더라. 1열 텍스트 입력.. 2열 텍스트 입력.. 2열 레이아웃을 만드는 방법 1단계) HTML 추가 두 개의 동일한 열 생성 float 예제 Internet Explorer 10 및 이전 버전을 사용하는 브라우저에서 지원되려면 float로 사용해야한다. flex 예제 두 개의 열을 만드는 현대적인 방법은 CSS Flexbox를 사용하는 것이다. FlexBox는 Internet Explorer 10 및 이전 버전에서는…

블로그로 코드를 공유하고 바로 그 페이지에서 바로 에디터 확인하여 코드 수정하고 실시간으로 반영되어 볼 수 있게 뷰어도 만들어보자. 처음엔 iframe 만들어서 썼는데 매일 iframe 만들어서 공유하는 것은 정말 쉽지 않은 것 같더라…. 온라인 에디터 & 뷰어 jsdelivr 나 codepen 같은 사이트에서 제공하는 것처럼 최초에 저장되었던 코드가 나오고 그 코드를 수정할 수 있는 에디터 + 실시간 결과가 나오는 뷰어를 만들고 싶다. 어떻게 해야 코드를 수정 가능하게 공유하고 실시간으로 코드를 적용해서 보여줄 수 있을지 방법을 알아보자. 먼저 어떤 기능으로 만들 것인지 정리해보자….

w3.css 헤더 스타일 지정 헤더 스타일을 지정하는 방법을 알아보자. 헤더를 지정하여 포스트의 컨텐츠가 아니라 제목을 눈에 띄게 표현할 수 있다. 보통 헤더에 메뉴를 많이 넣어놓는 편이나 이 포스트에서는 헤더 지정하는 방법까지만 알아보자. 헤더 만들기 1단계) HTML 추가 2단계) CSS 추가 헤더 스타일을 큰 내부 여백, 가운데 정렬된 텍스트, 특정 배경색 및 큰 크기의 텍스트로 지정한다. 코드 실행

w3.css 정보 페이지 정보 페이지/회사 소개 페이지를 만드는 방법을 알아보자. 나는 누구이고 무엇을 하는지에 대한 설명이 들어간다. 요즘은 웹을 접속할 수 있는 장비의 종류가 굉장히 많아 모든 페이지가 다 반응형으로 만들어진다. About 페이지 만들기 1단계) HTML 추가 <div class=”about-section”> <h1>About Us Page</h1> <p>Some text about who we are and what we do.</p> <p>Resize the browser window to see that this page is responsive by the way.</p> </div> <h2 style=”text-align:center”>Our Team</h2> <div class=”row”> <div class=”column”> <div class=”card”> <img src=”/w3images/team1.jpg” alt=”Jane” style=”width:100%”>…

w3.css 연락처 섹션 웹 페이지에 반응형 연락처 섹션을 만드는 방법을 알아보자. 일반적으로 연락처 섹션을 만들어서 방문자들에게 메일로 연락을 받을 수 있다. 이 방법은 입력을 받는 것까지 구현한다. 이 이후 작업은 PHP를 다뤄야 한다. 연락처 섹션 만들기 1단계) HTML 추가 <div class=”container”> <div style=”text-align:center”> <h2>Contact Us</h2> <p>Swing by for a cup of coffee, or leave us a message:</p> </div> <div class=”row”> <div class=”column”> <img src=”/w3images/map.jpg” style=”width:100%”> </div> <div class=”column”> <form action=”/action_page.php”> <label for=”fname”>First Name</label> <input type=”text” id=”fname” name=”firstname” placeholder=”Your name..”> <label…