ul list

element๋ฅผ ์ค‘์•™์— ๋†“๊ธฐ

.form__main{
    background-color: #F7F7F7;
    width: 340px;
    margin: auto;
}

margin์„ auto๋กœ ์ฃผ๊ณ  width์„ ์›ํ•˜๋Š” ๋งŒํผ ์žก์•„์ฃผ๋ฉด(ex. width: 50%, width : 300px ๋“ฑ) ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ค‘์•™์— ์œ„์น˜ ํ•˜๊ฒŒ ๋จ

  • width์„ ์ •ํ•ด์ค˜์•ผ์ง€ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ๊ณต๊ฐ„์„ ๋‹ค ์ฐจ์ง€ ํ•˜๋Š” ๊ฒƒ์„ ๋ง‰์•„์ฃผ๊ณ , width๋งŒํผ ๊ณต๊ฐ„์„ ์ฐจ์ง€ ํ•˜๋ฉด ์–‘ ์˜†์ด ์•Œ์•„์„œ ๊ฐ™์€ ํฌ๊ธฐ๋กœ margin์ด ์žกํžˆ๊ฒŒ๋œ๋‹ค.

๋ฐฉ๋ฒ• 2. display: flex ์ด์šฉํ•˜๊ธฐ
์ž์‹๋“ค์ด ๋ชจ๋‘ div ์ผ ๋•Œ ๋ถ€๋ชจ์—๊ฒŒ display: flex๋ฅผ ์ ์šฉํ•ด ์ฃผ๋ฉด

.parent{
   display : flex;
  flex-direction : column; // ์ž์‹๋“ค ์„ธ๋กœ ๊ธฐ์ค€์œผ๋กœ ๋งž์ถœ ๊ฒƒ์ž„
  justify-content: center; // 
  align-items : center; 
}

.parent{
   display : flex;
  flex-direction : row; // ์ž์‹๋“ค ๊ฐ€๋กœ๋กœ ์ •๋ ฌ
  justify-content: center;
  align-items : center; 
}

flex ์ž๋ฃŒ๋Š” A Complete Guide to Flexbox์™€ ์—ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ ํ•˜์˜€๋‹ค.

input element ๊พธ๋ฏธ๊ธฐ

input{
   padding: 8px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 5px;
}
input:focus {
  outline: none;
}

*:focus{
  outline: none;
}
  • input์€ ์กฐ๊ธˆ ๋šฑ๋šฑํ•œ๊ฒŒ ์ด์˜๊ธฐ ๋•Œ๋ฌธ์— padding์„ ๋„ฃ์–ด์ฃผ๊ณ , ๋‘ฅ๊ทผ ํ…Œ๋‘๋ฆฌ ๋งŒ๋“ค๊ธฐ
  • input ์ž…๋ ฅ์‹œ ํ…Œ๋‘๋ฆฌ์— ํŒŒ๋ž€ ํ…Œ๋‘๋ฆฌ๊ฐ€ ์ƒ๊ธฐ๋Š”๋ฐ outline: none์œผ๋กœ ์—†์• ์ค€๋‹ค.