나도 한번 써봤다. 챗gpt 요즘 들어 엄청나게 이슈가 많은 챗GPT! 인터넷이나 영상으로 챗gpt를 이용해 자동으로 코드를 생성하거나 프로그래밍을 한다거나 하는 영상 및 짤을 하도 많이 봐서 나도 한번 간략한 코드 생성을 ai에게 맡겨보았다. 테스트 H.1st 의 코드에서 prd-name 클래스에 있는 id의 값의 . 이라는 특수 문자를 제거해달라는 코드를 생성 해달라는 요청을 했었다. H.1st Remove Dots 다소 복잡하고 필요없는 코드들이 생성이 되어 있어서 추가로 좀더 간결하고 초등학생도 이해가능한 코드로 생성하기 위해 좀더 디테일하고 세분화해서 질문을 반복한 결과 아래와 같은 간결하고 깔끔한 코드가 생성이 되었다. H.1st 챗gpt의 장단점 간략한 코드는 그냥 챗gpt를 사용하자! 복잡..
html 또는 css 등 태그의 사용에 있어서 웹 표준에 맞는 사용법이 존재한다. 사용방법은 다소 간단하고 쉽다. 다만 태그문구가 조금 길어지며 태그작성시 시간이 조금 더 소모가 된다. 이러한 부분에서 웹 표준 수칙을 지키지 않고 사용하는 기본 태그들이 많이 있다. 웹디자인 및 퍼블리싱을 공부한다면 처음부터 웹 표준에 맞게 태그를 사용하는 습관을 들이는게 중요하다. 문서의 구조는 html, 동작은 Javascript, 디자인은 css 제일 지켜지고 있지 않는것이 따로 관리를 하는 습관이다. 일부 사이트의 태그를 분석해보면 inline 스타일의 css를 많이 사용하는 것을 볼 수 있다. 이는 추후 관리를 전혀 신경 쓰지 않고 사용된 태그의 예이다. 각 페이지를 제어하는 css 파일이 있음에도 불구하고 귀찮..
가독성의 중요성html의 문서에서 가장 많이 쓰이는 것이 텍스트이다. 내가 만든 컨텐츠의 정보가 방문자 또는 구독자에게 내용을 제대로 잘 전달하기 위해서는 잘읽히고 잘 보이는 문서를 만들어야 한다. 가독성이 떨어지면 글을 읽는데 어려움이 있고 글을 다 읽기도 전에 포기를 하고 이탈이 이루어진다. css 폰트 제어속성폰트를 제어하는 css의 소스는 엄청나게 많으나 가장 많이 쓰이는 속성만 간단히 알아보자. 속성 속성값 설명 color red 또는 #ffffff 텍스트의 컬러 direction ltr, rtl 텍스트의 방향 line-height 150% 줄간의 간격 text-align left,right,center,justify 텍스트 정렬 text-spacing 1px 글자 간의 간격 text-decor..
css 핵은 무엇인가?크로스브라우징을 위해 특정 브라우저를 제외하거나 적용시킬 수 있는 css사용 기법css 핵이 왜 필요한가?다양한 브라우저들이 있다. 제일 잘 알고 있는 익스플로어, 크롬, 사파리, 모질라등 더 많은 브라우저들이 존재한다. 또한 각 브라우저들은 html / xhtml을 불러들이는 방식에서 조금씩 차이가 나기도 하며 버그가 존재한다. 그래서인지 css 코드가 모든 브라우저에서 똑같이 보이지 않는다. 이런 상황에서 css 핵을 통해 동일하게 보이도록 해야한다. 비록 비표준이기 때문에 최대한 사용하는걸 자제하긴 해야한다. css 핵의 종류와 사용방법다양한 종류의 css 코드가 있다. 닷핵, 언더스코어 핵, 해시 핵, 스타핵등 win IE별로 적용가능한 핵도 존재하며 특정 브라우저에만 적용가..
css 구문 css의 구문을 이해하기 위해서는 3가지를 이해해야한다.선택자 (selector)속성명 (propery)속성값 (value) 라는 선택자 사용하여 속성명인 백그라운드 컬러 즉 배경색을 속성값 엘로우라는 스타일을 입힌것이다. 즉 라는 선택자의 배경은 노란색입니다.라고 이야기를 하면 쉽다. 속성과 송석값은 계속적으로 추가가 가능한데 이때는 ;의 기호를 사용하여 추가를 한다.그리고 a와 동일한 속성값을 가지고 싶은 선택자가 있다면 a, td { background-color: yollow; font-size: 16px; } 이런식으로 선택자 , 의 사용으로 중복 사용이 가능하다. 3가지 유형의 선택자 선택자중에서는 총 3가지의 선택자 타입을 가진다. id 선택자class 선택자type 선택자id ..