본문 바로가기

html, 스타일시트(css, scss)47

[html/css]가상 요소를 활용해 삼각형/말풍선 만들기 가상요소로 삼각형을 만드는 방법을 알아보자.가상요소로 만든 도형은 컨텐츠를 꾸미는 용도로써 많이 사용된다. 넓이값(width/height)은 없고 border 값만 있는 박스를 이용해 삼각형을 만들 수 있다.아래 모습처럼빨간색 삼각형으로 말풍선을 만들 수 있다.가상요소로 삼각형을 만들기 전에 넓이값이 없는 상태의 border 영역의 모습을 알아야한다. 아래의 사진으로 예시 모양을 대체 하겠다.노란색 background와 핑크색 border를 가진 박스가 있다고 가정하자.만약 border의 두께가 5px로 들어가 있는 상태에서 박스의 width와 height가 0이 되면 어떤 모양이 될까?넓이가 없지만 border는 5px이라는 넓이 값이 존재하기 때문에,아래 모양과 같이 border만 남은 것을 볼 수 .. 2024. 6. 28.
[html/css] 특수문자 코드(Entity Code) 보기 좋게 정리되어있는 블로그  HTML 자주 사용 특스문자 코드표(Entity code) HTML 자주 사용 특수문자 코드표 (Entity code)Entity code 자주 사용하는 html 앤티티 코드를 정리하였습니다. 간혹 정말 필요한데 검색할려니 마땅히 무엇을 적어야 할지 몰라 당황했던적이 있습니다. 생각해보면 특수문자 또는 html code라고만aneok.tistory.com진짜 모든 코드가 다 있는 HTMl  문자코드표 HTML StandardHTMLLiving Standard — Last Updated 26 June 2024 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character .. 2024. 6. 27.
[html/css] 입력 양식 태그 입력 양식 태그입력 양식 태그는 사용자로부터 정보를 얻고자 할 때 사용하는 태그를 말한다.회원가입이나 게시글 포스팅 등 무언가를 입력해서 서버로 전송하거나 상품 주문시 내용을 작성하여 보내는 것과 같은 것들이 입력 양식에 해당한다.기본적으로 form 태그를 바탕으로 form 태그 내부에 다양한 입력 태그들을 활용해 사용한다.입력 양식 태그form입력 양식 지정을 위한 최상위 기본 태그.input여러 유형의 입력 양식을 지정하는 태그.label입력 양식과 연결되는 텍스트 라벨.fieldset입력 양식들을 그룹으로 묶어주는 태그.legendfieldset의 제목을 표시하는 태그.button입력 버튼을 생성하는 태그.select드롭 다운 박스로 목록 중에서 선택할 수 있는 양식 태그.optgroupselect.. 2024. 6. 20.
[html/css] table 태그에 적용하는 다양한 스타일 속성 border-collapsetable 태그의 border는 기본적으로 분리되어있다.  border-collapse는 분리되어있는 border를 한 줄로 합치는 속성이다.thead, tbody, tfoot에 스타일을 부여하기 위해선 border-collapse가 반드시 적용되어 있어야한다. 속성 적용은 부모태그인 table에 적용하여야한다.border-collapsecollapse 떨어져 있는 두 줄을 하나로 합쳐주는 속성.separate 기본 값. table과 td 또는 th의 줄이 나뉜다./* 기본형 */태그명{border-collapse : seperate}태그명{border-collapse : collapse}border-spacingtable 태그의 border-collapse가 separate .. 2024. 6. 20.
[html/css] table / 표의 구조를 나타내는 태그 <thead>, <tbody>, <tfoot>과 열에 동일하게 속성을 적용하는 <colgroup>, <col/> 앞전 시간에 table 표에 들어가는 태그 tr, th, td를 배웠다.https://yerica.tistory.com/26,, ,와 표를 꾸며주는 속성 colspan, rowspan, border-collapse" data-og-description="테이블 태그 , , , 테이블 태그는 이전에는 레이아웃을 만드는 태그로 많이 사용되었다.현재는 게시판 영역과 같은 부분에 많이 사용되는 태그로, 표를 구성해주는 태그이다.부모태그인 태그로 " data-og-host="yerica.tistory.com" data-og-source-url="https://yerica.tistory.com/26" data-og-url="https://yerica.tistory.com/26" data-og-image="https.. 2024. 6. 20.
[html/css] 멀티미디어 태그 / audio, video, iframe HTML5멀티미디어 파일멀티미디어 파일은 이미지, 동영상, 오디오 등의 파일들을 말한다. 인터넷 초기에는 멀티미디어 파일을 직접적으로 재생할 수 없었기 때문에 플러그인 프로그램을 사용했다. 미디어를 시청하기 위해 플러그인 파일들을 다운로드 해야했고, 이러한 과정에서 바이러스 등 여러 문제가 발생했다.  W3C에서는 플러그인 없이도 미디어를 재생하기 위해 멀티미디어 태그를 웹 표준 태그로 정의했다.멀티미디어 파일은 inline-block 속성이다. W3C란? (설명 링크 클릭) 태그는 오디오를 재생시키는 태그이다./* 기본형 */속성 종류autoplay오디오를 자동으로 재생한다.controls오디오 컨트롤 바를 표시한다.muted음소거preload재생 버튼을 눌러 재생하기 전, 오디오 파일을 다운로드하여 .. 2024. 6. 18.

티스토리툴바