저는 HTML으로 디자인 합니다(13)
-
디자이너의 HTML/CSS 클론 코딩
배경 나는 디자이너이지만.. 코드에 대한 이해도가 있어야 개발자와의 소통이 좀 더 잘되는것으로 판단! 또한, HTML/CSS를 알아두면 추후 내 포트폴리오 홈페이지라던지 간단한 마크업은 내가 할 수 있을 것 같아 연습할겸 클론코딩을 진행해보았다. 그래서 이더리움 홈페이지를 방문해 구조를 파악하였다. 목표 먼저 코드를 쓰기전에 내 나름의 규칙을 세웠다. 첫 번째, id와 class를 구분해서 사용할 것. id는 한번 만 쓸 수 있고 class는 여러번 쓸 수 있기 때문에 반복 작업에는 class를 사용하는것이 낫다고 판단했다. 그리고 두 번째, 구조를 한 눈에 알아 볼 수 있도록 header/section/footer 시맨틱 태그 사용해보기, 이 외 CSS 스타일 작업시 지저분하게 작성하지 않을 것, 최대..
2023.08.30 -
[챗 GPT] HTML/CSS으로 게시판 만들기
챗 GPT한테 html/css으로 게시판을 만들어 달라고 했다. 게시글 번호, 날짜, 제목, 조회수를 넣어달라고 했고 하단에 page navi UI도 만들어달라고 했다. 그럼 이런 코드가 나온다. 게시판 번호 날짜 제목 조회수 1 2023-08-09 첫 번째 게시글 123 이전 1 2 3 다음 하단은 CSS /* Reset some default styles */ body, h1, table { margin: 0; padding: 0; } /* Basic styling */ body { font-family: Arial, sans-serif; } /* Board styles */ .board { width: 80%; margin: 0 auto; padding: 20px; } /* Post List sty..
2023.08.10 -
HTML5/CSS3이용해서 1시간만에 뉴스레터 디자인 만들기 - CSS 세로 가운데 정렬
HTML5/CSS3 연습을 위해 뉴스레터 만들기 도전! 우선 뉴스레터의 목적은, 잠재 고객 및 기존 고객에게 더 많이 접근할 수 있는 방법을 찾고 있다면 뉴스레터는 현재 뉴스, 팁, 제품, 서비스를 더 많은 고객과 공유할 수 있는 이상적인 방법입니다. 프린트된 뉴스레터 또는 이메일 뉴스레터로 수익 또는 판매량, 홈페이지 트래픽, 브랜드 인지도 등을 높임으로써 주된 비즈니스 목표를 달성할 수 있습니다. 출처 : 셔터스톡 하단 이미지들은 핀터레스트에서 찾은 뉴스레터 디자인들이다. 새로운 소식, 이벤트 뿐만 아니라 서비스 회원가입 메세지, 비밀번호 찾기(특히 비밀번호 찾기 할 때 많이 보인다), 금융쪽에서는 거래 내역 등등 이메일로 날라오는 소식을 그냥 텍스트로 전달하는게 아니라 브랜드 아이덴티티를 살려서 배..
2023.05.25 -
HTML/CSS 강의 9일차 : 웹폰트, 포토샵이미지슬라이스
html의 안에다가 웹폰트 태그 써주면 됨! 구글 웹폰트 들어가서 link href 긁어와서 head에 넣어주고 css스타일에서 font:굵기 크기 '폰트이름'에서 밑에 폰트패밀리 이름 복사해오면 웹폰트 적용완료~~ 포토샵에서 슬라이스된거 저장하려면 웹으로 저장 슬라이스한것만 더블클릭해서 이름 만들어주고 쉬프트 눌러서 슬라이스 된것들만 클릭해서 저장하면 이미지 파일 만들어짐! 스케치만 쓰다가.. 올만에 포토샵 쓰려니까 낯설고도 새롭다..ㅎ
2022.01.18 -
HTML/CSS 강의 8일차 : 레이아웃,링크걸기,그래픽스타일(그라디언트),크로스브라우징,웹폰트
반응형 사이즈일때 영역잡은거 뒤쪽 배경 처리하는법 div으로 잡고 그 안에서 영역잡기 css으로가면 그 div에 width 100%주면됨 브라우저 사이즈 늘렸을때 뒤에 배경이 잘리지않음 그래서 header에 네비게이션 주는방법은 ul을 이용해서 주고 ul은 원래 수직정렬이니까 float:left로 수평정렬 해주고 text-align:center로 텍스트들 중앙정렬 해줌 그러면 상하가 중앙이 안되어있는데 그럴땐 lin-height이용해서 상하 중앙정렬 해주면 상하좌우 가운데로 옴 이렇게 영역잡고 레이아웃 제작하면됨 a href="경로" 해주면 링크 걸림 target넣어줘야 새창으로 열림 title 넣어줘야 웹접근성 완성 근데 a태그는 기본값이 밑줄+파란색폰트라서 a태그 폰트컬러 검정색, 텍스트 데코레이션 ..
2022.01.15 -
HTML/CSS 강의 7일차 : 웹접근성, h태그, 시맨틱태그
웹접근성) scope의 col은 아래쪽으로 읽어줌 id넣은거 headers에 th제목이랑 같이 써주면 스크린리딩에서 같이 읽어줌 label태그 넣으면 제목만 눌러도 포커스 되게 만들 수 있음 이것도 label 태그 th이름에 아이디와 함께 넣었더니 제목만 눌러도 텍스트필드 선택됨 **label for에 인풋태그 아이디 넣어야 적용 웹 접근성 땜에 h1~6태그 쓰구 css에서 숨김처리 해야 스크린리딩하면 읽어줌 [div]는 그냥 아무 의미 없는 영역 잡을 때 [header]는 상단 헤더바 [section]은 컨텐츠 넣을때 [nav]는 내비게이션 [article]본문 글 쓸때 [aside]별도의 내용을 담은 팝업(?)같은거나 말그대로 옆에 사이드에 보이는 레이아웃 [footer]바닥에 붙어있는 홈페이지 정보..
2022.01.14