도담도담

우선 가장 기본적으로 하이퍼 링크를 걸때는 a href 를 사용한다. 이때, a 태그 안에 target 을 사용해 새 창에서 띄우거나 현재창에서 띄우는걸 설정할 수 있다. _blank 새 창이나 탭에 링크된 페이지를 보여준다. _self 현재 창에 링크된 페이지를 보여준다. See the Pen a href target by lsj5634 (@zinisang) on CodePen.

ol 태그 ol 태그는 Ordered List 의 약자로 기본적으로 순서를 나타내며, 기본형식은 아래의 형식을 따른다. 간단한 목록 설정또한 바로 적용할 수 있는데, 'type' 속성을 통해 리스트 설정을 할 수 있다. (설정하지 않을 시에는 숫자를 기본 값으로 사용한다) See the Pen ol by lsj5634 (@zinisang) on CodePen. ul태그 ul 태그는 Unordered List 의 약자로 기본적으로 순서없는 리스트이며, 기본형식은 아래의 형식을 따른다. 간단한 목록 설정또한 바로 적용할 수 있는데, 'list-style-type' 속성을 통해 리스트 모양을 설정하거나 없앨 수 있다. (설정하지 않을 시에는 기본인 disc 값으로 사용된다) See the Pen ul by l..

기본 테이블 만들기 가장 기본적으로 테이블을 만들기 위해서는 , , , 이렇게 4가지 태그를 사용한다. 은 지금부터 테이블이라고 선언해 주는 태그이다. 은 table header 의 줄임말로 테이블 위에 카테고리 이름을 나타낼때 주로 쓰인다. 은 table row 의 줄임말로 한줄, 엑셀에서의 하나의 행을 나타낸다. 은 table date 의 줄임말로 한칸, 엑셀에서의 하나의 셀을 나타낸다. 그래서 종 구성을 나타낼 때는 보통, ~~ ~~ ~~ 이런 형태로 구성된다. 테이블 선 / 제목 추가 그냥 테이블만 만들어 놓으면 글씨들만 보이지만, 만들어놓은 테이블의 구성을 눈으로 확인하고 싶다면 border="1" 을 추가해주면 눈으로 테이블의 선을 확인할 수 있다. 또한, 태그를 사용하면 그 테이블의 제목을 ..

시멘틱 태그 (Semantic tag) 란? Semantic 이란 사전적으로 "의미의, 의미론적인" 이라는 뜻을 가지고 있다. 그러므로 시멘틱 태그는 의미있는 태그들이라는 뜻 정도가 될수 있다. 기본적으로 안에 들어가는 이름으로 그 역할을 알 수 있다 하면 semantic 일 것이고의미를 알 수 없다하면 non-semantic 이라고 할수 있다. non-semantic semantic , , , , , , , 등등 기존에는 에 id 나 class 를 부여해서 사용해야만 했다면, HTML5 에 들어와서 다양한 시멘틱 태그들이 생기면서 보기에 더 명확하게 의미를 표현할 수 있게 되었다. 예) 으로 사용하던 내용을 로 사용 할 수 있게 되었다.

타임리프는 컨트롤러를 사용하는 페이지들을 위해 동작하는 프론트 언어 이다. 다른 기능들을 구현한필요없이 html 내부에서 간편하게 사용이 가능하다. 타임리프 사용 선언 Include 기능 Replace 기능 //가져올 화면 ~~~~//이 내부의 내용을 가져와서 교체하겠다. //받는 화면 //이 세팅을 가져올꺼다 //바꾸자 태그 생성 및 삭제 //태그 생성 //태그 삭제 태그에 값 세팅 및 연산 value 값 세팅 반복문 if 문 // and/or 추가 // if ~ else ~ swich case 문 이미지 태그에 src 속성 링크 url // 기본적인 링크 삽입 // 고정된 url과 변수를 함께 사용할 때 링크 // 링크에 파라미터를 보낼 때 수정 @{ } 은 문자열을 그대로 url 로 쓰는 것이고 $..

프로젝트를 작업할때 하이퍼링크를 걸어주는 [a href] 는 많이 사용할 것이다. 그런데 기본적으로는 늘 파란글씨에 밑줄이 그어져 있어 별로 안예뻐보인다 (제일중요) 그래서 우선 기본적으로 해 두어야 할 것은 보통 글씨 밑에 줄을 삭제하는 것을 우선으로 한다. See the Pen a href by lsj5634 (@zinisang) on CodePen. 위와같이 text-decoration-line 이라는 속성을 통해 밑줄을 없앨수도 있고, 밑줄의 위치를 바꿀 수도 있다. 하이퍼링크를 동작에 따라 글자색이나 형식을 변경하는 방법도 있다. See the Pen a href2 by lsj5634 (@zinisang) on CodePen. a:link { color :~~; text-decoration: ~..

html 내부에서 아무리 엔터를 쳐서 글을 정렬한다고 해도 막상 프로젝트를 실행시켜보면 글이 그냥 쭉 이어져 있다. 이를 위해 우리는 html 태그들을 활용하여 글을 작성해야 한다. preformatted 의 약자로, 내부에 엔터를 사용하여 평소에 쓰는 것 처럼 문장을 정리할 수 있다. See the Pen by lsj5634 (@zinisang) on CodePen. break 의 약자로, 원하는 구간에서 엔터를 사용하듯이 사용할 수 있다. 태그를 사용하는 만끔 줄 넘기기가 가능하다. See the Pen by lsj5634 (@zinisang) on CodePen. paragraph 의 약자로, 문장을 쓰면 문장별로 구간을 나눈다. See the Pen by lsj5634 (@zinisang) on ..

프로젝트 작업을 하다보면 중간에 빈 공간을 활용하기위해 스페이스를 열심히 눌러 작성을 하지만, html 태그 안에서 암만 띄어쓰기를 여러번 쳐도 띄어쓰기가 중복되지 않는다. 언제고 듣거나 배운적은 있지만 단어가 익숙하지 않아서 자주 까먹게 되는 이 띄어쓰기를 위한 태그는 를 사용한다. 이것의 풀 네임은 Non Breaking Space 인데, 그냥 결과적으로는 빈공간 띄어쓰기 해주는 역할이다. 밑을 보고 참고하면 눈에 잘 보일 것 이다. See the Pen by lsj5634 (@zinisang) on CodePen.