본문 바로가기

웹 프론트엔드(Web FrontEnd)22

[CSS] border & text 속성 ( + 글자 가운데 정렬 방법 ) border border 속성은 테이블 윤곽 설정이다. 보통 3가지 속성을 한 번에 지정해서 사용한다. ex) 1px solid #777 두께 1픽셀, 줄 종류 한 줄, 색상 rgb값 텍스트 속성은 바로 밑에서 설명한다. html에서 p 속성 3개 블록을 만듦. 스타일에서 p 태그 속성에 모두 테이블 윤곽과 색상을 회색으로 정해준다. #rgb값은 대표적인 색깔을 영어로 입력해도 인식한다. border-radius = 테두리가 둥글어짐 p {border: 1px solid #777; border-radius: 8px;} 둥글어진 테두리의 모습 text 속성 color 텍스트 색 지정 line-height 줄 사이의 간격 지정 letter-spacing 글씨 사이의 간격 text-align 수평에서 글자 정.. 2022. 9. 5.
[HTML] 폰트 (폰트 적용, 글씨 크기, 정렬) 폰트 font 관련 속성 한 번에 설정하기 font-xxx = font 내부 단일 속성 xxx 설정하기 ex) font-size, font-weight 먼저 사용하고 싶은 폰트를 검색한다. 네이버, 구글 등이 폰트를 제공한다. 구글 웹폰트 검색 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 마음에 드는 폰트 선택 후 화면이다. 화면 큰 글씨 Styles 우측에(현재 가려져 있음) + select 버튼을 선택하면 사진 우측 하단에 link, import 형식으로 폰트를 가져다 쓸 수 있는 코드를 제공한다. 그리고 CSS 룰 또한.. 2022. 8. 4.
[CSS] 스타일 시트와 선택자 (속성과 값 적용 방법, 가상 선택자) 스타일은 3가지 방식으로 적용할 수 있다. 1. 내부 스타일 시트 2. 외부 스타일 시트 3. 인라인 스타일 첫 번째로 간단하게 사용하는 방식인 내부 스타일 시트이다. 스타일 태그 내부에 모든 스타일을 적용시키며 이 스타일 태그는 외부 스타일 시트 내부 스타일 시트 인라인 시트 실행결과 2022. 7. 31.
[CSS] invalid property value 오류 해결 방법 예상 외로 정말 간단한 오류다! 이렇게 마우스를 올려보면 오류 항목 invalid property value 라고 뜨는데 픽셀값을 안줬기 때문이다. 가끔 pixel 단위 'px'값을 0으로 줄 때나 다른 몇 속성들은 px를 입력 안해도 되지만 이런식으로 position을 잡는 것에서는 정확하게 px 단위를 입력해야한다. 그렇지 않으면 이 오류가 뜬다. 2022. 7. 24.
[JS] 함수 내부에 외부 변수 값 전달하기 onclick 이벤트를 하나씩 모두 선언하면 복잡하니 한 번에 반복문으로 묶어주려다가 작성한 코드이다. //post store click event var store = document.querySelectorAll(".store"); for ( var i = 0; i < store.length; i++ ){ store[i].onclick = function() { store[i].src = "img/stored.png"; } } 문제가 없어 보이고 작동될 것 같은데 왜 안되는지 모르겠다. 함수 내부 store[i].src 줄에서 오류가 발생한다. 콘솔 창에는 Uncaught TypeError: Cannot set properties of undefined (setting 'src') 라고 떴다. 위 코.. 2022. 7. 24.
[HTML] <video> 태그 사용 방법 (인코딩, controls 속성) video 태그는 사용 방법이 매우 간단하다. Your browser does not support the video tag. 태그를 열어주고 width 원하는 너비와 height 높이값을 준다. (안 주면 기본 크기로 재생된다.) 태그를 열어 어떤 동영상을 어떤 유형(mp4 등)으로 넣을지 설정한다. 인코딩 이때 html을 여는 브라우저가 지원하는 동영상 유형인지 잘 확인하고 유형을 설정하거나 인코딩을 해야 오류가 없다. mp4는 폭넓게 모든 브라우저에서 지원하는데 재생이 안 돼 확인해보니 H.264 + AAC 방식으로 인코딩 된 MP4 포맷 이어야 한다. 이후 source가 재생이 안 될 경우 화면에 표시할 텍스트를 넣어준다. controls 항목은 플레이, 정지와 같이 비디오 실행을 제어할 수 있게.. 2022. 7. 17.
[HTML] <li> 태그 {<ul>, <ol>, 목록(list) 만들기} HTML은 웹 사이트에 표시되는 뼈대이다. 깔끔한 화면의 정돈을 위해선 는 매우 중요하다. 먼저 이 목록 태그들은 모두 '블록' 요소이다. 할당된 범위가 있어 자동으로 개행이 된 것처럼 화면에 보인다. HTML 블록과 인라인의 개념 (특징, 주의할 점) 블록과 인라인 제일 큰 제목 h1 Header2 h3 + tab : 자동완성 글씨를 쓸 때 사용하는 태그 strong아무글자 행에서 드래그하지않고 ctrl + c, v 사용가능 오른쪽 작성된 코드와 왼쪽 내용을 비교해보면 태그 anhanryang.tistory.com 태그는 숫자를 자동으로 내부 li리스트에 부여해준다. 다음으로 태그는 숫자를 없애고 기본 속성의 아이콘이 앞에 붙는다. 는 단독으로 쓸 수 없어 혹은 내부에 들어간다. 바로 확인해보자. ol.. 2022. 7. 17.
[HTML] <table> 테이블 태그 (rowspan, colspan, border 사용 방법) 태그는 HTML 문서에서 표를 만드는 태그다. 행과 열을 넣기 위해 , 등을 태그 안에 함께 작성한다. 이전에는 웹 페이지의 레이 아웃을 구성할 때 태그를 이용하여 많이 구성하였다고 한다. 하지만 적당한 사용 방법이 아니므로 레이아웃 구성시에는 태그와 CSS를 이용하는 것이 좋다. 먼저 테이블 태그를 열어보자 테이블 내부에 border라는 속성은 테두리를 의미한다. 픽셀 값을 넣어 테이블의 윤곽을 설정한다. 픽셀 값, 줄 종류, 줄 색상 ex) 1px, solid, #777 같은 형태로 다양한 값 적용이 가능하다. 픽셀만 정해주도록 하자. 이제 테이블 내부에 tr, td로 행과 열을 넣어야 할 것이다. align은 맞추다, 즉 정렬의 의미를 가진 속성이다. VS code에서 작성 시 center, lef.. 2022. 7. 17.
[HTML] <a> 앵커 태그 (href, target, 새 탭으로 열기) 앵커 태그 자주 쓰는 태그 중 하나로 흔히 ppt와 한글문서에서도 존재하는 하이퍼링크 개념이다. a 태그를 누르면 담겨있는 주소로 이동하는 방식이다. 속성에 값을 넣어 다른 url 혹은 다른 html로 이동 가능하다. 기본 형태 이름 정상적으로 네이버, 구글, hello.html로 이동이 된다. 기본적으로 a + tab으로 자동완성을 사용하면 href만 나오는데 하이퍼링크를 클릭했을 때 이 페이지에서 표시할지 새 페이지에서 열지 지정하는 속성이 있다. 바로 target 이다. 기본 설정은 입력하지 않아도 _self로 설정되어있다. 그래서 보이는 화면에서 이동만 하게된다. 하지만 target에 _blank 속성을 넣어주면 새 탭에서 열리는 것을 확인할 수 있다. 구글로 이동 새 탭으로 열기 결과 ( 클릭 .. 2022. 7. 17.

티스토리툴바