배경 나는 디자이너이지만.. 코드에 대한 이해도가 있어야 개발자와의 소통이 좀 더 잘되는것으로 판단! 또한, HTML/CSS를 알아두면 추후 내 포트폴리오 홈페이지라던지 간단한 마크업은 내가 할 수 있을 것 같아 연습할겸 클론코딩을 진행해보았다. 그래서 이더리움 홈페이지를 방문해 구조를 파악하였다. 목표 먼저 코드를 쓰기전에 내 나름의 규칙을 세웠다. 첫 번째, id와 class를 구분해서 사용할 것. id는 한번 만 쓸 수 있고 class는 여러번 쓸 수 있기 때문에 반복 작업에는 class를 사용하는것이 낫다고 판단했다. 그리고 두 번째, 구조를 한 눈에 알아 볼 수 있도록 header/section/footer 시맨틱 태그 사용해보기, 이 외 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..

HTML5/CSS3 연습을 위해 뉴스레터 만들기 도전! 우선 뉴스레터의 목적은, 잠재 고객 및 기존 고객에게 더 많이 접근할 수 있는 방법을 찾고 있다면 뉴스레터는 현재 뉴스, 팁, 제품, 서비스를 더 많은 고객과 공유할 수 있는 이상적인 방법입니다. 프린트된 뉴스레터 또는 이메일 뉴스레터로 수익 또는 판매량, 홈페이지 트래픽, 브랜드 인지도 등을 높임으로써 주된 비즈니스 목표를 달성할 수 있습니다. 출처 : 셔터스톡 하단 이미지들은 핀터레스트에서 찾은 뉴스레터 디자인들이다. 새로운 소식, 이벤트 뿐만 아니라 서비스 회원가입 메세지, 비밀번호 찾기(특히 비밀번호 찾기 할 때 많이 보인다), 금융쪽에서는 거래 내역 등등 이메일로 날라오는 소식을 그냥 텍스트로 전달하는게 아니라 브랜드 아이덴티티를 살려서 배..

html의 안에다가 웹폰트 태그 써주면 됨! 구글 웹폰트 들어가서 link href 긁어와서 head에 넣어주고 css스타일에서 font:굵기 크기 '폰트이름'에서 밑에 폰트패밀리 이름 복사해오면 웹폰트 적용완료~~ 포토샵에서 슬라이스된거 저장하려면 웹으로 저장 슬라이스한것만 더블클릭해서 이름 만들어주고 쉬프트 눌러서 슬라이스 된것들만 클릭해서 저장하면 이미지 파일 만들어짐! 스케치만 쓰다가.. 올만에 포토샵 쓰려니까 낯설고도 새롭다..ㅎ

반응형 사이즈일때 영역잡은거 뒤쪽 배경 처리하는법 div으로 잡고 그 안에서 영역잡기 css으로가면 그 div에 width 100%주면됨 브라우저 사이즈 늘렸을때 뒤에 배경이 잘리지않음 그래서 header에 네비게이션 주는방법은 ul을 이용해서 주고 ul은 원래 수직정렬이니까 float:left로 수평정렬 해주고 text-align:center로 텍스트들 중앙정렬 해줌 그러면 상하가 중앙이 안되어있는데 그럴땐 lin-height이용해서 상하 중앙정렬 해주면 상하좌우 가운데로 옴 이렇게 영역잡고 레이아웃 제작하면됨 a href="경로" 해주면 링크 걸림 target넣어줘야 새창으로 열림 title 넣어줘야 웹접근성 완성 근데 a태그는 기본값이 밑줄+파란색폰트라서 a태그 폰트컬러 검정색, 텍스트 데코레이션 ..

웹접근성) scope의 col은 아래쪽으로 읽어줌 id넣은거 headers에 th제목이랑 같이 써주면 스크린리딩에서 같이 읽어줌 label태그 넣으면 제목만 눌러도 포커스 되게 만들 수 있음 이것도 label 태그 th이름에 아이디와 함께 넣었더니 제목만 눌러도 텍스트필드 선택됨 **label for에 인풋태그 아이디 넣어야 적용 웹 접근성 땜에 h1~6태그 쓰구 css에서 숨김처리 해야 스크린리딩하면 읽어줌 [div]는 그냥 아무 의미 없는 영역 잡을 때 [header]는 상단 헤더바 [section]은 컨텐츠 넣을때 [nav]는 내비게이션 [article]본문 글 쓸때 [aside]별도의 내용을 담은 팝업(?)같은거나 말그대로 옆에 사이드에 보이는 레이아웃 [footer]바닥에 붙어있는 홈페이지 정보..