HTML에서 태그를 사용할 때 내용과 태그 사이에 공백이 생기는 이유는 HTML 해석 방식 때문입니다. HTML은 기본적으로 코드에 있는 모든 공백(스페이스, 탭, 줄바꿈 등)을 유효한 텍스트 콘텐츠로 간주합니다. 따라서, 아래와 같이 작성하면 text 태그 바로 뒤의 줄바꿈과 시작 위치의 탭이나 스페이스도 텍스트로 인식되어, 실제로 보여지는 텍스트 내용 앞에 공백이 생깁니다. 이를 해결하려면, 태그와 내용 사이에 공백이 없도록 작성해야 합니다. 아래와 같이 작성하면 공백이 생기지 않습니다 text
펌글 출처 : https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute (HTML) 데이터 속성 사용하기 (data attribute) 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 데이터 속성은 'data-'시작한다. velog.io Data- 속성 HTML5부터 HTML 요소의 'data-'로 시작하는 데이터 속성이라는 것이 생겼다. 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 브라우저는 'data-'로 시작하는 데이터 속성에는 어떠한 행동도 관여하지 않기 때..
태그의 accept 속성 태그의 accept 속성은 서버로 업로드할 수 있는 파일의 타입을 명시합니다. accept 속성에 하나 이상의 속성값을 명시할 경우에는 콤마(,)를 사용하여 구분합니다. 이러한 accept 속성을 유효성 검사를 도구로 사용해서는 안 되며, 업로드된 파일은 서버에서 검증되어야 합니다. 이 속성은 요소의 type 속성값이 “file”인 경우에만 사용할 수 있습니다. [예시] 아래에서 파일선택 버튼을 눌러 파일을 고르게 될 때, 이미지 파일만 보이는 것을 확인 할 수있습니다. Choose a profile picture: 속성값 파일 확장자 닷(.)으로 시작되는 파일 확장자 ex) .png, .jpg, .pdf, .hwp audio/* 모든 타입의 오디오 파일이 허용됨. video/*..
CSS 애니메이션은 기본값이 반복이다. CSS 애니메이션을 1회만 실행하도록 만드는 방법은 다음과 같습니다. animation-iteration-count 속성을 1로 설정합니다. animation-iteration-count 속성을 1로 설정합니다. animation-fill-mode 속성을 forwards로 설정합니다. 이렇게하면 애니메이션이 종료될 때 마지막 상태를 유지합니다. animation-fill-mode: forwards; 사용 예 .box { width: 100px; height: 100px; background-color: red; animation: myAnimation 1s forwards; //mode사용예 //animation: myAnimation 1s 1; //count사용예..
contentEditable HTML 요소의 contenteditable 속성은 요소의 편집 가능 여부를 나타냅니다. contenteditable 속성은 HTML 요소를 수정 가능한 편집 가능한 요소로 만드는 데 사용됩니다. 열거형 속성으로, 다음 중 하나의 값을 가질 수 있습니다. 'true' : 요소가 contenteditable임을 의미합니다. 'false' : 요소를 편집할 수 없음을 의미합니다. 'inherit' : 요소가 부모의 편집 가능 여부를 상속함을 의미합니다. (기본값) contenteditable 속성을 사용하면 사용자가 직접 HTML 요소 내부의 텍스트, 이미지 및 기타 콘텐츠를 편집할 수 있습니다. 이것은 특히 CMS (컨텐츠 관리 시스템) 및 블로그 등의 웹 애플리케이션에서 유용..
CSS 작업 후 확인 시 변경사항에 문제점이 없는데 계속 적용이 안될때 해결방법 정리 이런 문제는 브라우저가 이전에 사용한 CSS를 캐시에 보관해 사용하다 변화된 순간을 파악하지 못해 발생깁니다. 크롬브라우저 > 도구더보기 > 인터넷 사용기록 삭제 쿠키 및 기타 사이트 데이터에 체크를 확인하고 삭제해주면 됩니다. 간단한 방법 : F12를 눌러 개발자도구 켜놓기 > 좌측 상단에 새로고침 아이콘 우클릭 > 캐시비우기 및 강력새로고침
soundcloud 웹사이트 작업 정리 -1 javascript 수업을 앞두고 html css 강의가 끝나고 기존 웹사이트를 따라 만드는 작업을 했다. 사이트 선정 후 UI 설계서를 작성하였다. 자바스크립로 구현 해야 할 부분도 매우 많겠지만... 우선 최대한 배운 선에서 조금이라도 비슷하게 흉내를 내겠다 라는 마음으로 작성했다. 해당 설계서는 아마 새로운 것들을 체득하고 나서 다시 작성하는 것이 좋을 것 같다. 코드리팩토링도 마찬가지로 .... 처음은 사이트를 관리자도구로 한번 쓱 봐준 후 대략적으로, 시멘트 태그 구역을 나누어 주었다. 1부분은 header , 2는 nav , 3은 section, 4는 footer로 나누어 주었다. 텍스트를 스크랩 해 html 부분 먼저 틀을 잡..
빨간색 : 문제설명 / 노란색: css코드 / 보라색: 코드로 인해 움직여질 문제 요소 앞서 소개드린 Flex 게임과 비슷한 느낌의 게임이다.. 물길을 당근에, 독물을 잡초에 뿌릴수 있게 코드를 입력해주면 된다. 문제 설명이 잘되어있어서 정답이 있다고 보고 풀면 된다. Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS grid 공부 게임 추천 Grid Garden 링크 ↑ Grid Garden 문제 정답 1번 (그리드에서 기준을 잘 생각하여 문제를 풀자.) grid-column-start: 3; 2번 grid-column-start: 5; +다른 정답으로 grid-column-stard: -1; 도 가능하고 grid-c..
HTML 레이아웃 display 속성값 종류 : block, inline , inlin block position 종류 : static, relative, absolute 해더안에 네비가 있는 경우가 많다. + inline block 인라인이지만 블록같은(속성을 넣을수있다) float과 clear(float 레이아웃 해제) + clear 전재조건(float가 있을때) 그리드 시스템 종류 : 정적그리드시스템 , 동적그리드시스템, 반응형그리드시스템 반응형 그리드 클래스 종류 : 모바일 태블릿 노트북 데스크탑 . col-xs-* .col-sm-* .col-md-* .col-lg-* 디바이스의 해상도에 따라서 적절하게 대응하는 반응형 웹을 만들기 위하여 사용하는 viewport 모바일 브라우저들은 v..
CSS 그리드 grid flex와 grid의 차이 Flex는 한 방향 레이아웃 시스템(1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 출처 : https://studiomeal.com/archives/533 Grid 레이아웃을 만들기 위한 기본적인 HTML 구조 Flex와 마찬가지로, 컨테이너와 아이템만 있으면 됌. A B C D E F G H I 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템) Flex와 마찬가지로, Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작. .container { display: grid; } 그리드 용어 정리 출..
속성효과 1. 불투명속성 마우스 올리면 선명하게 보이게 설정하기 마우스를 올리면 선명하게 보입니다. 구글웹사이트 : 가상클래스선택자는 어떤 상태를 지정한다. 이런상태는 태그,id,class처럼 html 문서상에 있는 것이 아니다. 가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다. 텍스트상자안의 배경이미지를 반투명하게 처리하기 html5 웹프로그래밍 마우스를 올리면 힌트와 정답 보여주기 문제] css3에서 불투명도를 적용하기 위한 속성은? 1. border 2. opacity 3. transparency 4. visible 힌트] 불투명을 뜻하는 영문단어를 찾아보세요 정답] 정답은 2번입니다 2. 가시성속성 가시성 visibility : h..
입력양식태그 1.제출/초기화양식 제출양식 : submit get방식 : 빠르고 보안이 좋다 / post방식 : 보이는방식 초기화양식 : reset 입력데이터 초기화버튼 이름 : 학과 : 2.텍스트/비밀번호 입력양식 텍스트양식 : input type="text"안에 value= "" 비밀번호 입력양식 : password placeholder는 input text 박스에 글씨 떠있게 하는 태그 회원인증입력양식 Id : PW : 3.텍스트 공간 입력/필드셋 양식 텍스트 공간 입력양식 : textarea fieldset 태그: 입력폼이 여러개있을때 경계선 그려 그룹으로 만들때 사용 개인정보입력 이름: 학번: 4.라디오/체크박스/버튼 양식 라디오 입력양식 : radio 체크박스 양식: check box 버튼 ..
