분류 전체보기

링크와 이미지를 페이지에 삽입하고 싶을 땐, 각각 a태그와 img태그를 사용한다. 링크는 기본적으로 문서간의 연결을 말하며, 내부나 외부의 링크를 만들 수 있다. 1. a 태그 a태그의 기본적인 형식은 이와 같다. href는 대상 경로이다. 대상의 주소(URL)이나 내부문서의 id속성 값이다. (처음 코드를 구성할 때, 대상 경로가 불확실 한 경우가 있다. 그런 경우에는 href="#"으로 채워두면 잠시 오류를 피할 수 있다.) target은 링크 연결 방식이다. _blank, _parent, _self, _top이 있다. 가장 많이 사용되는 것은 새 창으로 열기인 _blank이다. title은 링크 설명이다. 지정한 경로의 정보가 무엇인지 메모하는 용도이다. a태그를 사용하기 위해서는 href를 필수적..

HTML에서 목록을 생성할 때는 대표적으로 세 가지를 사용할 수 있다. ul, ol, dl인데, 각각 순서 없는, 순서 있는, 정의표현의 역할을 한다. 목차나 메뉴같이 목록이 필요한 부분을 구성할 때 필수적이다. 1. ul 태그 Unordered List의 줄임표현으로, 순서가 없는 목록이라는 의미이다. ul태그 안에 li(list item)을 담는 구성이다. Hello HTML CSS JS 이와 같이 구성한 코드는 다음과 같이 출력된다. 실행결과에서는 보이듯이 글머리 기호가 붙는다. 2. ol 태그 Ordered List의 줄임말로, 순서가 있는 목록이라는 의미이다. ul태그와 마찬가지로 ol태그안에 li를 담는 구성이다. Hello HTML CSS JS 이와 같이 구성한 코드는 다음과 같이 출력된다...

HTML에서 그룹을 만들 수 있는 방법은 두 가지가 있다. div와 span태그이다. div는 블록 요소와 인라인 요소를 한 묶음으로 묶고 싶을 때 사용 가능하다. span은 인라인 요소를 그룹으로 묶을 때 사용 가능하다. 여기서 블록 요소는 태그처럼 하나의 태그가 한 줄의 공간을 차지하는 요소를 말하고, 인라인 요소는 그렇지 않고 실제 존재하는 공간만큼만 공간을 차지하는 요소를 말한다. 각 요소의 형태는 밑의 그림과 같다. 1. div 태그 블록 요소와 인라인 요소를 한 그룹으로 묶고 싶을 때 사용한다. 실제 결과물에는 큰 차이가 없을 수도 있지만, 구분없이 텍스트들만 나열하면 어떤 텍스트가 어디에 쓰려한 것인지 알기 어렵기 때문에 구분을 해주는 것이 보기에 좋다. 예를 들면 다음처럼 활용할 수 있다...

1. 텍스트 작성 1) hn 태그 제목 다음과 같이 사용한다. 여기서 h는 heading, n은 중요도 숫자이며 1부터 6까지 있다. 1이 가장 중요한 텍스트로 가장 크고 6이 가장 작다. 검색엔진에서는 hn태그를 키워드로 인식하므로 검색엔진 최적화를 위해 hn태그를 적절히 사용하는 것이 중요하다. h1 h2 h3 h4 h5 h6 다음과 같은 코드를 실행 시키면 글자크기를 알 수 있는데, 이정도 크기 차이를 보인다. * HTML에서 hn태그는 h1부터 순서대로 인식한다. 따라서 hn태그를 사용할 때는 h1부터 순서대로 사용하고 연속적으로 숫자를 사용해야 한다. 예를 들어서 h1,h2,h4 를 사용하면 h3을 인식하지 못했기 때문에 h1,h2만 출력하고 h4는 출력하지 않는 경우가 생긴다. 2) p태그 본..

HTML이란 Hyper Text Markup Language의 약자로 웹페이지를 만들때 사용하는 마크업 언어이다. HTML 로 구성된 코드로 웹페이지의 구조를 만들 수 있는 것이다. HTML의 기본적인 구조 HTML은 태그를 바탕으로 이루어져 있다. 여기서 태그는 HTML 문법을 이루는 가장 작은 단위로 웹페이지에서 사용되는 다양한 구성요소들을 정의한다. 태그는 다음과 같이 사용한다. 따라서 태그들을 사용한 기본적인 구조는 다음과 같다. 시작태그는 , 끝 태그는 과 같이 쓴다. 태그의 위치에 따라 상위 태그는 부모 하위태그는 자식, 부모가 같은 태그는 형제 태그라 부른다. * HTML에서 주석은 와 같이 쓴다.

1. 체크박스 Checkbox라는 함수를 통해 구현해 낼 수 있다. 말 그대로 체크를 할 수 있는 네모박스이며 bool 값으로 클릭 시 체크, 체크해제를 할 수 있다. void main() { runApp(MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter의 입력'), ), body: Body(), ), )); } class Body extends StatelessWidget { const Body({super.key}); @override Widget build(BuildContext context) { return Column( children: [ TestCheckBox(), ], ); } } class TestCheckBox ext..

Stateless vs Stateful 빌드 후에 변하지 않아도 되는 위젯의 경우에는 Stateelss 계속해서 변해야하는 위젯의 경우에는 Stateful void main() { runApp(MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Stateless vs Stateful'), ), body: Body(), ))); } class Body extends StatelessWidget { const Body({super.key}); @override Widget build(BuildContext context) { return Column(children: [ ExampleStateless(), ExampleStateful(), ]); } } /..

1. 상하로 배치 void main() { runApp(MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Widget을 상하로 배치'), ), body: Body(), ), )); } class Body extends StatelessWidget { const Body({super.key}); @override Widget build(BuildContext context) { return Container( height: 300, width: double.infinity, color: Colors.black12, child: Column( mainAxisAlignment: MainAxisAlignment.center, //상하좌우로 중앙 crossAx..