본문 바로가기
반응형

웹프로그래밍

HTML main tag 관련 깔끔하게 정리하기 블로그 목적 : HTML main tag 에 대해서 공부및 정리후 나만의 노하우와 지식을 공유한다. 블로그 요약 1.HTML main tag 에 대해서 알아본다. 2.HTML main tag 예제를 알아본다. 블로그 상세내용 - HTML tag 를 한마디로... 한마디로 태그는 해당 문서의 요소의 주 콘텐츠(main content)를 정의할 때 사용하는 tag 입니다. 그리고, HTML5에서 새롭게 추가된 요소라고 하네요.. - HTML tag 관련 주의해야할 점은 ? 요소의 콘텐츠는 ... - 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 합니다. - 그리고, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 참고로, HTML 5에서 추가된 의미.. 더보기
타임리프(Thymeleaf)에 대해서 간단한 리뷰(part 01) 블로그 목적 : Spring Boot 에서 가장 많이 쓰이는 타임리프(Thymeleaf)에 대해서 공부및 정리후 나만의 노하우와 지식을 공유한다. 블로그 요약 · 타임리프(Thymeleaf)에 대해서 알아본다. · 타임리프(Thymeleaf)관련 아래내용을 알아본다. - 변수 표현식 : ${...} - 메시지 표현식 : #{ ...} - 링크 URL 표현식: @{...} - 선택 변수 표현식: *{... } - 프래그먼트 표현식: ~{...} - 리터럴 치환 : | | 블로그 상세 내용 우선, 타임리프(Thymeleaf)에 대해서 정리해보면 아래와 같다. 타임리프(Thymeleaf) 는 웹 및 독립 실행형 환경 모두를 위한 최신 서버 측 Java 템플릿 엔진입니다. 즉, 다양한 서버 템플릿 엔진 중에 하.. 더보기
5.웹프로그래밍, Javascript, 자료형(data type) 에 대해서 알아볼께요..^^ 블로그목적 자바스크립트관련 자료형에 대해서 공부및 정리 후 공유한다. 자바스크립트의 자료형(data type)은? 보통 자료형은 변수가 가질 수 있는 값의 종류를 말함. 아래와 같은 자료형이 존재함. 수치형 정수 or 실수 문자열형 문자가 연결된 것을 의미 쉽게 말해서 텍스트. 부울형 true or false 값을 가지는 데이터형 객체형 객체를 나타내는 타입. undefined 값이 정해지지 않은 상태를 말함. ​ 그럼, 자바스크립트에서 변수를 선언할 때 다른 언어들처럼, 자료형이 필요있을까? 정답 변수를 선언할 때는 자료형이 필요없음. but, 특정한 값이 변수에 저장되는 순간, 내부적으로 자료형이 결정됨. 즉, 변수는 어떤 타입의 값이라도 가질 수 있음. 예시 그럼, 현재 변수가 저장하고 있는 자료의.. 더보기
4.웹프로그래밍, Javascript, 변수(variable) 에 대해서 알아볼께요..^^ 블로그 목적 Javascript 에서 사용하는 변수에 대해서 공부하고 정리해본다. ​ 자바스크립트에서 변수란? 다른 언어들과 마찬가지로, 변수는 데이터를 저장하는 상자로 생각할 수 있음. 그럼, 변수를 선언할 때는 어떻게 해야 할까? 아래와 같이, var 키워드를 사용하면 됨. 설명 var 키워드 변수가 선언된다는 것을 나타냄. thub_value 변수이름 스크립트 안에서 유일해야함. 세미콜론(";") 하나의 문장이 끝났음을 나타냄. 그럼, 변수는 언제 사용하는 것일까? 사용자의 입력값 or 텍스트 저장 계산이 필요할때는 중간결과 저장 기타 등등. 그럼, 변수 값을 저장하는 것은 무엇을 사용할까? 다른 언어들과 마찬가지로, 등호(=) 를 사용하면됨. 설명 thub_value 라는 변수에 100이라는 숫자.. 더보기
3.웹프로그래밍, Javascript, 문장(statement) 에 대해서 알아볼께요..^^ 블로그 목적 자바스크립트 문장에 대해서 공부해보고 정리해본다. ​ 자바스크립트에서 문장(statement)의 의미는? 보통 자바스크립트는 브라우저에 의하여 실행되는 문장의 순서 있는 집합이라고도함. ​ 그럼, 문장(statement) 이라는 개념은 무엇일까? 다른 프로그래밍 언어와 같이 자바스크립트 문장은 웹 브라우저에게 내리는 명령이라고 간주할 수 있음. 즉, 웹브라우저가 무엇을 해야하는지를 지시하는 것. 그리고 각 문장의 끝에는 세미콜론(;) 을 붙여야 함. C++ 와 마찬가지로, 자바스크립트도 공부해보니, 문장을 세미콜론(;)으로 분리하고 있음. 그런데, 차이점은 자바스크립트에서는 세미콜론을 생략해도 된다고함. 즉, 자바스크립트에서는 줄이 바뀌면, 하나의 문장이 끝난 것으로 판단함. 그러나, 가급적.. 더보기
16.웹프로그래밍, CSS, 레이아웃을 위한 div 요소 사용하기에 대해서 알아볼께요. 블로그목적 CSS관련 레이아웃을 위한 div 요소에 대해서 공부및 정리 후 공유한다. ​ 레이아웃을 위한 div 요소 활용에 대해서. div 요소를 사용해서 아래와 같은 절차로 레이아웃을 만들 수 있음. 첫째, html 파일을 생성하고 div 요소를 생성 둘째, css style 통해서 요소의 위치 및 색상을 지정 마지막, 원하는 레이아웃 완성 추가적으로, div 는 블록 수준의 요소이고, 다른 요소를 그룹핑하는데 보통 사용됨. ​ 그럼, div 를 사용해서 레이아웃을 실제로 만들어 보자. 목표 그럼 지금 부터 목표로 달려가 보자. 우선, html 파일을 생성 한 후 웹 페이지 내용을 아래와 같이 입력함. exam0_div_layout.html 웹페이지 실행화면 설명 아직 css 를 작성하지 않아서 실제.. 더보기
15.웹프로그래밍, CSS, 웹페이지의 요소 위치 정하기에 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 요소 위치 정하기에 대해서 공부하고 정리후 공유한다. ​ 웹페이지의 요소 위치에 대해서 알아보자. 보통 요소의 위치는 top/bottom/left/right 속성으로 지정함. 예를 한번 들어보자. ​​​​​​​​​​​​​​주의할점 top/bottom/left/right 모두 컨테이너 경계선에서의 오프셋(offset[편차/차이])이라는 점. 즉, right: 200px; 라고 하면 컨테이너의 오른쪽 경계에서 200 픽셀만큼 떨어진 곳을 의미함. 그리고, CSS의 position 속성은 요소의 위치 설정 방법을 나타냄. 즉, 절대적인 위치설정 or 상대적인 위치 설정인가 ? top/bottom/left/rigth 속성은 position 속성이 먼저 설정되지 않으면, 동작하지 .. 더보기
14.웹프로그래밍, CSS, 웹페이지의 레이아웃(layout) 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 레이아웃에 대해서 공부및 정리 후 공유한다. 웹페이지의 레이아웃(layout) 이란? 웹페이지 레이아웃에는 HTML 요소의 위치, 크기등이 포함되어 있음. 예를 들면, 쉽게말해서 집을 새로 사기위해서 계약금, 중도금, 잔금을 치르고나서 등기를 치고, 새집에 들어가게되면, 집안에 TV, 가구, 냉장고 등등을 배치하게되는 상황과 유사하다고 해야 할까? 암튼 그렇다..^^; 박스모델(Box Model)에 대해서 알아볼까요? 박스모델이란? 웹 브라우저가 각 요소를 화면에 그릴 때는 무조건 사각형으로 간주한다는 것을 말함. 사각형을 이루는 요소는 아래와 같음. 패딩(padding) 내용과 테두리 사이의 간격 눈에 보이지 않음. 테두리(border) 내용과 패딩 주변을 감싸는 테두리.. 더보기
반응형

티스토리툴바