HTML12 <img>와 background-image 속성 /Semantic Web, Semantic Tags 태그를 이용하는 방법과 background-image 속성을 이용하는 방법의 차이점 둘다 시각적으로는 같은 효과를 낼 수 있지만, 사용하는 목적이 조금 다르다. 크게 웹접근성과 업무 효율성 측면에서 구분해 사용될 수 있다. 태그를 이용하는 방법 1. 해당하는 이미지가 구체적인 정보를 담고 있을 때 이미지가 정보 전달을 목적으로 사용되는 경우 태그의 alt 속성을 이용해 웹접근성을 높일 수 있다. 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다. alt 속성은 사용자가 느린 네트워크 환경, src 속성값의 오류, 시각 장애인용 스크린 리더 사용 등으로 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 그렇기 때문에 태그를 이용해 background.. 2023. 3. 8. JavaScript / button 스크롤 높이 따라 사라지고 나타나도록 하기 자바스크립트로 스크롤 높이에 반응하는 버튼 만들기 완성 모습 HTML 코드 설명 우선 aside 하위로 버튼들을 묶어주었다. 로 버튼을 만든 이유 : 반원 모양으로 버튼을 크게 만들기 위해서 div태그를 사용했다. 태그로 버튼을 눌렀을 때 이동하고자 하는 위치 또는 링크를 지정한다. 태그는 구글 icon소스 링크이다. class name "material-symbols-outlined"은 icon 기본 style 셋팅값이다. CSS 코드설명 _visible이 붙은 class이름으로 스타일을 만든다. (js에서 추가될 class로 이름은 명시적인 것이면 어떤 이름도 괜찮다.) {backgorund-color} 까지는 원하는 스타일(버튼디자인) {position : fixed} : 버튼이 브라우저 화면 상에.. 2022. 6. 26. 사이트 따라 만들기 part.3 이미지를 정렬하는 방법 1. 단순히 가로로 정렬하는 경우 (좌우 여백 맞춰서 꽉채우기) 핵심 속성 : {display: flex} {justify-content: space-between} 위의 경우는 이미지 3개를 가로로 단순 정렬하면 된다. 여기서 포인트는 이미지들의 여백과 우측 이미지가 영역에 꽉차도록 우측 정렬되도록 하는 것이다. 1. html코드 로 3개의 img를 하나로 묶고, 를태그로 감싸서 세부적인 스타일을 적용할 수 있도록한다. 2. style 지정하기 banner 영역 전체의 여백과 크기를 지정한다. {margin-top;} 위의 컨텐츠 요소와의 간격을 지정한다. 를 선택해서 지정하기 a{float: left;} 가로로 일렬로 정렬한다. a{margin-right;} 요소간의 간격을 지.. 2022. 4. 26. 사이트 따라 만들기 part.2 사이트의 컨텐츠 영역 만들기 1. 컨텐츠 그룹핑 POPULAR ITEM 구성 : 좌측의 menu와 우측의 제품 정보 영역 menu는 POPULAR ITEM이라는 타이틀과 EXPEDITION와 2개의 카테고리로 이루어짐 > 전부 텍스트 제품 정보 영역은 제품 이미지와 제품명, 제품 가격이 하나의 그룹으로 4개가 정렬됨. > 이미지와 텍스트 2. 선택자를 사용하여 그룹을 지정. /*전체 컨텐츠 영역*/ /*popular item 전체*/ /*popular item 안에서 menu 부분*/ /*popular item 안에서 제품 정보 영역*/ 3. 하위의 요소들을 나눈다. title부분은 태그를 사용한다. menu의 경우 함께 정렬되기 때문에 태그를 사용한다. 1. 태그를 이용한 방법 제품 정보 영역 전체를 .. 2022. 4. 25. 사이트 따라 만들기 Part.1 사이트보고 분석해서 그대로 따라 만들어보기 1. 기본셋팅 보통 사이트를 제작할 때 필수적으로 생성하는 폴더 3가지 css css폴더 안에 꼭 들어가는 2가지 css파일 reset.css - 필수 style.css - 외부스타일시트(일반적으로 다들 사용함) 사이에 링크를 걸어서 연결 js images 2. 사이트 구조 분석 큰 분류부터 먼저 html문서에서 작성하고 세부적인 요소들을 만든다. 크게 나누면 상단부분 메인이미지 컨텐츠 하단부분 은 큰 영역을 지정한 것이다. 크게 4파트로 나눈 후 그 안에서 또 세분화와 조직화를 한다. 이때는 요소별로 같이 정렬해야하는 것들끼리 묶어서 그룹핑한다. 예를 들어, 상단 부분은 상단의 top과 navigation부분으로 나눌 수 있다. 그리고 top부분은 또 다시 l.. 2022. 4. 23. HTML5 / select 태그 / option 태그 / textarea 태그 / button 태그 다양한 태그를 활용하여 상품주문서 폼 만들기,태그 활용하여 드롭다운 목록 만들기, 태그 태그 태그주문서 작성할 때 예시 화면이랑 수량 입력란의 길이가 달라서 스타일 오류인줄 알고 몇번이나 체크하였으나 스타일 오류가 아니었다. 처음부터 끝까지 체크해보니, 수량 입력란의에서 max 부분에 오타가 있었다. 최대 수량이 적용되지않아서 입력란이 크게 보이는 것이었다. 오탈자 항상 체크하자.Q : 태그 와 태그의 차이는?A: 태그는 오직 하나의 옵션만을 선택할 수 있는 form input type이다. 태그는 list에서 주어지는 어떤 옵션이든 선택이 가능하다. 자체에 input을 넣어서 옵션을 추가할 수 있다. 하지만 는 안된다. form input type가 아니다.참고 문헌 사이트 :https://www.. 2022. 4. 10. HTML5 / input 태그 / input type 종류 input 태그input type의 종류 코드 를 이용하면 코드를 텍스트로 보이게 할 수 있다.checkbox와 radio button의 차이점 : 복수선택이 가능한지 여부. checkbox만 복수 선택 가능. Q: range 모양 변형하는 방법 A: 브라우저별로 기본 스타일이 있어서 다르게 보인다.기본에 설정되어있는 브라우저 스타일 속성을 없애고 css에서 수정한다. input[type=range] {-webkit-appearance: none;margin: 18px 0;width: 100%;}input[type=range]:focus {outline: none;}이런식으로 세부적인 부분들을 수정할 수 있으나 브라우저마다 다르기 때문에 각각 만들거나 통합된 코드를 입력해야한다. https://css-.. 2022. 4. 10. HTML5 / form 태그 / label태그 / fieldset 태그와 legend 태그 폼 만들기form 태그label 태그fieldset 태그와 legend 태그 form에서 autocomplete 속성을 이용해 자동 완성 기능을 동작하게 할 수 있다. radio button,check box를 input type="radio/checkbox" 로 만들 수 있고, 이를 label을 연결하면 텍스트를 클릭해도 선택이 되어 사용성 측면에서 편리하다.list 만들 때 style="list-style:none로 리스트 앞에 bullet이 나타나지 않게 할 수 있다.form에서 input type="password"로 할 경우 입력하는 텍스트가 ...으로 보인다.Q: 한 문서에서 폼이 여러개인 경우 각각 다른 스타일을 적용하고자 할 때 편리하게 할 수 있는 방법은? head에서 style로 작성할.. 2022. 4. 9. HTML5 anchor/ image map anchor 만들기이미지 맵 만들기SVG image image map 만들 때 이미지 주소로도 생성이 가능하다.image map에서 area shape가 circle일 경우 coords는 좌표값과 반지름크기로 지정한다. Q: 이미지맵 좌표 쉽게 알아내는 방법(그림판 이용하는 방법 말고) A: 그림판이 제일 쉬운 방법.. 프로그램을 이용하는 방법도 있지만 이게 제일 간편하다.anchor 만들기id 속성을 이용해 이동할 위치 지정 후, 태그와 href 속성을 사용 anchor로 연결할 링크 만들기.도착 표시될 텍스트/이미지 출발 표시될 텍스트/이미지 출발에서 클릭하면 도착으로 이동텍스트 태그목록 태그표 생성이미지와 하이퍼링크 태그이미지 맵 만들기map태그 area태그, usemap 속성을 이용해 이미.. 2022. 4. 8. 이전 1 2 다음
